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**

@@ -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, 
+}

@@ -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
+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);
+  client.say(target, `/color `+changecolor());
+  papago.detectchat(msg, client, target);
 
-//   if(msg == '척척학사'){
-//     client.say(target, `안녕하세요 척척학사의 방송입니다.`);
-//   }
+  if(msg == '척척학사'){
+    client.say(target, `안녕하세요 척척학사의 방송입니다.`);
+  }
   
-// }
+}
 
-// exports.addChannel = (channel) =>{
-//     opts.channels.append(channel);
-// }
+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}`);
-// }
+// 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');