박진수

Merge branch 'integration' into 'master'

1차 Integration

1차적으로 integration해서 테스트해봤습니다. 시험 앞두고 개발하느라 고생이 많습니다 모두
개인적으로 핸드폰으로 방송을 켜서 확인해본 결과 아주 1차적인 목표였던 번역과 번역 후 말하기 기능은 동작했습니다.

개선해야할 사항은 

* 번역한 텍스트만 `chat message` 이벤트를 emit하도록 설정. 일반 텍스트나 번역 전의 텍스트는 필요하지 않을 듯합니다.
* backend 설정 유연하게. server의 README.md에 잘못 표기된 내용이나 오타가 많습니다. 그리고 .env에서도 필요 없는 환경변수는 없애거나 혹시 모를 용도를 표기해주셨으면 합니다.
* **frontend와 backend의 oauth 로그인 설정**. 이 설정이 되어야 백엔드에서도 인증 처리를 한 뒤 청취 가능한 채널 목록을 관리할 수 있을 것 같습니다.
* backend에서 `/channels` channel list api, frontend에서 해당 api를 이용해 채널 리스트 업데이트 기능이 추가되어야할 것 같습니다.

See merge request !11
......@@ -21,3 +21,4 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.eslintcache
\ No newline at end of file
......
......@@ -40,7 +40,7 @@ khuwitch는 크게 아래의 항목들로 동작한다고 볼 수 있습니다.
**frontend**
```bash
$ KHUWITCH_PORT=8000 npm start
$ PORT=8000 npm start
```
**backend**
......
This diff could not be displayed because it is too large.
......@@ -8,9 +8,11 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"aws-sdk": "^2.804.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"socket.io-client": "^3.0.3",
"web-vitals": "^0.2.4"
},
"scripts": {
......
......@@ -5,6 +5,31 @@ import PersonIcon from "@material-ui/icons/Person";
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import PauseIcon from '@material-ui/icons/Pause';
import { WatchOutlined } from "@material-ui/icons";
import io from 'socket.io-client'
import tts from './tts';
const socket = io.connect("http://localhost:3000")
socket.on("connect", event=>{
// 테스트용으로 umi0410에게 입장.
// 다른 거 아무거나 채널이름을 넣으면 되겠지만, 그렇게 하고싶으면 백엔드에서 인자설정을 해줘야함.
socket.emit("joinRoom", 'umi0410', '진수봇')
})
// 말해야할 메시지가 왔을 때. 이건 따로 Component와 묶지 않아도 알아서 실행됩니다.
socket.on('chat message', (name, msg)=>{
console.log(msg)
tts.speak(msg)
})
// 해당 채널을 재생하고자할 때 실행시켜주세요.
const listen = (channelName)=>{
socket.emit("joinRoom", channelName, "dummy name") // name이 뭔지 대연이도 잘 모름.
}
// 해당 채널을 재생 안하도록 할 때 실행시켜주세요.
const quit = (channelName)=>{
socket.emit("leaveRoom". channelName, "dummy name") // name이 뭔지 대연이도 잘 모름.
}
export function Channel(props) {
const channel = props.channel;
......@@ -34,6 +59,7 @@ export class ChannelList extends React.Component {
// data for test
const test = [
{"name": "umi0410 진수", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv/umi0410"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
......@@ -44,6 +70,7 @@ export class ChannelList extends React.Component {
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
]
this.state = {
......
import AWS from 'aws-sdk'
// Polly를 사용하기 위한 자격증명을 설정한다.
AWS.config.region = 'ap-northeast-2';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: 'ap-northeast-2:03db97c9-a857-45f3-be6e-3cf84d6f619b'});
const polly = new AWS.Polly({
signatureVersion: 'v4',
region: 'ap-northeast-2',
});
function speak(text){
let params = {
'Text': text,
'OutputFormat': 'mp3',
'VoiceId': 'Seoyeon'
};
let tts = new AWS.Polly.Presigner(params, polly)
// tts로 변환한 음성 파일을 얻는다.
tts.getSynthesizeSpeechUrl(params, function(error, url) {
if (error) {
} else {
setTimeout(()=>{
console.log("실행")
let audio = new Audio(url)
audio.play()
// .then(delete audio);
}, 3000)
}
})
}
export default {
"speak": speak,
}
File mode changed
......@@ -25,7 +25,7 @@
```bash
$cd server
$npm install pkg.json --save
$npm install
$npm start
```
......
// const tmi = require('tmi.js');
// const papago = require('./openAPIs/papago_api')
// const ttlserver = require('../socket_server')
// // Define configuration options
// var opts = {
// identity: {
// username: process.env.BOT_USERNAME,
// password: process.env.OAUTH_TOKEN
// },
// channels: [
// 'bachelorchuckchuck'
// ]
// };
// // Create a client with our options
// const client = new tmi.client(opts);
// // Register our event handlers (defined below)
// client.on('message', onMessageHandler);
// client.on('connected', onConnectedHandler);
// // Connect to Twitch:
// client.connect();
// // Called every time a message comes in
// function onMessageHandler (target, context, msg, self) {
// if (self) { return; } // Ignore messages from the bot
// client.say(target, `/color `+changecolor());
// papago.detectchat(msg, client, target);
// if(msg == '척척학사'){
// client.say(target, `안녕하세요 척척학사의 방송입니다.`);
// }
// }
// exports.addChannel = (channel) =>{
// opts.channels.append(channel);
// }
// // Called every time the bot connects to Twitch chat
// function onConnectedHandler (addr, port) {
// console.log(`* Connected to ${addr}:${port}`);
// }
const tmi = require('tmi.js');
const papago = require('./openAPIs/papago_api')
const ttlserver = require('../socket_server')
// Define configuration options
var opts = {
identity: {
username: process.env.BOT_USERNAME,
password: process.env.OAUTH_TOKEN
},
channels: [
'bachelorchuckchuck'
]
};
// Create a client with our options
const client = new tmi.client(opts);
// Register our event handlers (defined below)
client.on('message', onMessageHandler);
client.on('connected', onConnectedHandler);
// Connect to Twitch:
client.connect();
// Called every time a message comes in
function onMessageHandler (target, context, msg, self) {
if (self) { return; } // Ignore messages from the bot
client.say(target, `/color `+changecolor());
papago.detectchat(msg, client, target);
if(msg == '척척학사'){
client.say(target, `안녕하세요 척척학사의 방송입니다.`);
}
}
exports.addChannel = (channel) =>{
opts.channels.append(channel);
}
// Called every time the bot connects to Twitch chat
function onConnectedHandler (addr, port) {
console.log(`* Connected to ${addr}:${port}`);
}
......
......@@ -4,11 +4,13 @@
"description": "twitch translator chatbot & tts server dev",
"main": "socket_server.js",
"scripts": {
"start": "node socket_server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Daeyeonkim97",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"ejs": "^3.1.5",
"express": "^4.17.1",
......
const config = require('./config/config')
const app = require('express')();
const cors = require('cors')
app.use(cors()) //express 기본 응답에 대한 cors
const http = require('http').Server(app);
const io = require('socket.io')(http);
const io = require('socket.io')(http, {
cors:{
origin: "*",
}
});
const papago = require('./openAPIs/papago_api');
const tmi = require('tmi.js');
......