Merge branch 'integration-2nd' into 'master'

2차 통합 완료 2차 통합을 완료했습니다. 고생하셨습니다 다들~! ## 개선사항 * frontend * login 후에는 login 창 안보이게 분기 * 설정을 .env로 편리하게 할 수 있도록 변경 * `/channels` API로 채널리스트를 받아와서 보여줄 수 있게 * backend * 영어채팅은 소켓에서 안 보내기 * tts * 재생 작업을 큐잉해서 순차적으로 재생하거나 max time을 지정 See merge request !14

Merge branch 'integration-2nd' into 'master'
2차 통합 완료 2차 통합을 완료했습니다. 고생하셨습니다 다들~! ## 개선사항 * frontend * login 후에는 login 창 안보이게 분기 * 설정을 .env로 편리하게 할 수 있도록 변경 * `/channels` API로 채널리스트를 받아와서 보여줄 수 있게 * backend * 영어채팅은 소켓에서 안 보내기 * tts * 재생 작업을 큐잉해서 순차적으로 재생하거나 max time을 지정 See merge request !14
박진수
Commit 3151102f5ceb5dc4a6a144b2edd6c4404a5e87ea 3151102f 2 parents a8b78a17 50d1f664
Showing 10 changed files with 121 additions and 67 deletions
frontend/src/App.js
frontend/src/Channel.js
frontend/src/Login.js
server/.env example
server/env example
server/openAPIs/papago_api.js
server/package-lock.json
server/package.json
server/socket_server.js
server/testviews/chat.ejs
--- a/frontend/src/App.js
View file @3151102
+++ b/frontend/src/App.js
View file @3151102
@@ -3,7 +3,8 @@ import Login from "./Login";
 import Body from "./Body";
 function App() {
-  let accessToken = null;
+  // let accessToken = null;
+  let accessToken = 1;
   return (
     <div className="app">
--- a/frontend/src/Channel.js
View file @3151102
+++ b/frontend/src/Channel.js
View file @3151102
@@ -8,7 +8,7 @@ import { WatchOutlined } from "@material-ui/icons";
 import io from 'socket.io-client'
 import tts from './tts';
-const socket = io.connect("http://localhost:3000")
+const socket = io.connect("http://localhost:3303")
 socket.on("connect", event=>{
     // 테스트용으로 umi0410에게 입장.
     // 다른 거 아무거나 채널이름을 넣으면 되겠지만, 그렇게 하고싶으면 백엔드에서 인자설정을 해줘야함.
@@ -18,6 +18,7 @@ socket.on("connect", event=>{
 // 말해야할 메시지가 왔을 때. 이건 따로 Component와 묶지 않아도 알아서 실행됩니다.
 socket.on('chat message', (name, msg)=>{
     console.log(msg)
+    console.log("got message")
     tts.speak(msg)
 })
--- a/frontend/src/Login.js
View file @3151102
+++ b/frontend/src/Login.js
View file @3151102
@@ -2,7 +2,7 @@ import React from "react";
 import "./Login.css";
 function Login(){    
-    const OAuthUrl = ""; // oauth 인증용 url
+    const OAuthUrl = `https://id.twitch.tv/oauth2/authorize?response_type=code&approval_prompt=auto&redirect_uri=http://localhost:3303/join&client_id=2d1gvcqyiyrk180qvnkec2fl23sv1o`; // oauth 인증용 url
     return (
         <div className="login">
             <img 
--- a/server/.env example deleted 100644 → 0
View file @a8b78a1
+++ b/server/.env example deleted 100644 → 0
View file @a8b78a1
-SOCKET_PORT=
-TOKEN=
-PAPAGO_ID=
-PAPAGO_SECRET=
-BOT_USERNAME= 
-OAUTH_TOKEN=
--- a/server/env example 0 → 100644
View file @3151102
+++ b/server/env example 0 → 100644
View file @3151102
+
+HOST_URI = [twitch end point url]
+SOCKET_PORT= [backend socket server port]
+TWITCH_CLIENT= [twitch dev client id]
+TWITCH_SECRET= [twitch dev client id secret]
+PAPAGO_ID= [papago client id]
+PAPAGO_SECRET= [papago client secret]
+BOT_USERNAME= [twitch bot name]
+OAUTH_TOKEN= [twitch user oauth token]
--- a/server/openAPIs/papago_api.js
View file @3151102
+++ b/server/openAPIs/papago_api.js
View file @3151102
@@ -48,45 +48,23 @@ exports.detectchat = (message, client, io, target) => {
         });
 }
-
+exports.trans = (message, client,io, target) => {
-// exports.trans = (message, lang, io, room) => {
+    request.post(
-//     request.post(
+        {
-//         {
+            url: PAPAGO_URL,
-//             url: PAPAGO_URL,
+            headers: {
-//             headers: {
+                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
-//                 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+                'X-Naver-Client-Id': `${PAPAGO_ID}`,
-//                 'X-Naver-Client-Id': `${PAPAGO_ID}`,
+                'X-Naver-Client-Secret': `${PAPAGO_SECRET}`
-//                 'X-Naver-Client-Secret': `${PAPAGO_SECRET}`
+            },
-//             },
+            body: `source=ko&target=en&text=` + message,
-//             body: `source=${lang}&target=ko&text=` + message,
+            json:true
-//             json:true
+        },async (error, response, body) => {
-//         },(error, response, body) => {
+            if(!error && response.statusCode == 200) {
-//             if(!error && response.statusCode == 200) {
+                var Translated = await body.message.result.translatedText;
-//                 var Translated = body.message.result.translatedText;
+                client.say(target, "(Trans) "+Translated);
-//                 io.to(room).emit('chat message', "trans", Translated);
+                io.to(target.replace('#','')).emit('chat message', "Trans", Translated);
-//             }
+            }
-//         });
+        });
-// }
+}
-
-
-// exports.detect = (message,io,room) => {
-//     request.post(
-//         {
-//             url: dPAPAGO_URL,
-//             headers: {
-//                 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
-//                 'X-Naver-Client-Id': `${PAPAGO_ID}`,
-//                 'X-Naver-Client-Secret': `${PAPAGO_SECRET}`
-//             },
-//             body: `query=` + message,
-//             json:true
-//         },(error, response, body) => {
-//             if(!error && response.statusCode == 200) {
-//                 var lang = body.langCode;
-//                 if(lang != 'ko'){
-//                     this.trans(message,lang,io,room)
-//                 }
-//             }
-//         });
-// }
--- a/server/package-lock.json
View file @3151102
+++ b/server/package-lock.json
View file @3151102
@@ -160,6 +160,14 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -488,6 +496,11 @@
         "unpipe": "~1.0.0"
       }
     },
+    "follow-redirects": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
+    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
--- a/server/package.json
View file @3151102
+++ b/server/package.json
View file @3151102
@@ -11,6 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "cors": "^2.8.5",
+    "axios": "^0.21.0",
     "dotenv": "^8.2.0",
     "ejs": "^3.1.5",
     "express": "^4.17.1",
--- a/server/socket_server.js
View file @3151102
+++ b/server/socket_server.js
View file @3151102
@@ -11,6 +11,7 @@ const io = require('socket.io')(http, {
 });
 const papago = require('./openAPIs/papago_api');
+
 const tmi = require('tmi.js');
 // Define configuration options
 var opts = {
@@ -18,17 +19,18 @@ var opts = {
       username: process.env.BOT_USERNAME,
       password: process.env.OAUTH_TOKEN
     },
-    channels: [
+    channels: ["tmwardo"]
-      'nnonuu'
-    ]
   };
 // Create a client with our options
-const client = new tmi.client(opts); //twitch chatbot client
+var client = new tmi.client(opts); //twitch chatbot client
+var bodyParser = require('body-parser');
+const { default: Axios } = require('axios');
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(bodyParser.json());
 app.set('view engine', 'ejs');
 app.set('views', './testviews');
-let room = ['nnonuu', 'bachelorchuckchuck'];
 // client.opts.channels;
 let a = 0;
@@ -38,13 +40,59 @@ app.get('/', (req, res) => {
 });
 app.get('/list',(req,res) => {
-    res.send(room);
+    var result = []
+    for (var i = 0; i<client.channels.length; i++){
+      result.push(client.channels[i].slice(1))
+    }
+    res.send(result)
+});
+
+app.post('/jointest',async (req,res)=>{
+  // requests.post(`https://id.twitch.tv/oauth2/token?client_id=<클라이언트 ID>&client_secret=${process.env.TOKEN}&grant_type=client_credentials`).json()
+  JoinChannel(req.body.streamer);
+  res.send(req.body.streamer)
+});
+console.log(`https://id.twitch.tv/oauth2/authorize?response_type=code&approval_prompt=auto&redirect_uri=${process.env.HOST_URI+':'+process.env.SOCKET_PORT}/join&client_id=${process.env.TWITCH_CLIENT}`)
+////////////////////////oauth////////////////////////
+const axios = require('axios')
+app.get('/oauth',(req,res)=>{
+    let codeAddr = `https://id.twitch.tv/oauth2/authorize?response_type=code&approval_prompt=auto&redirect_uri=${process.env.HOST_URI+':'+process.env.SOCKET_PORT}/join&client_id=${process.env.TWITCH_CLIENT}`
+
+    res.redirect(codeAddr)
+});
+app.get('/join', async (req,res)=>{
+    let code = req.query.code
+    let reqAddr = `https://id.twitch.tv/oauth2/token?client_id=${process.env.TWITCH_CLIENT}&client_secret=${process.env.TWITCH_SECRET}&code=${code}&grant_type=authorization_code&redirect_uri=${process.env.HOST_URI+':'+process.env.SOCKET_PORT}/test`
+    axios.post(reqAddr).then(resp1=>{
+        axios.get('https://id.twitch.tv/oauth2/validate',
+              {
+                  headers:{
+                      Authorization : "Bearer "+ resp1.data.access_token
+                  }
+              }
+        ).then(resp2=>{
+            JoinChannel(resp2.data.login)
+            res.redirect("http://localhost:8000?authenticated=true") // 이거 프론트 유알엘임
+        })
+    })
+    
 })
-app.post('/add',(req,res)=>{
+app.get('/test',(req,res)=>{
-    room.append(req.body.streamer);
+    res.send("")
-    res.send(req.body.streamer);
 })
+////////////////////////oauth////////////////////////
+
+
+async function JoinChannel(streamer){
+    await client.action(streamer,'KhuwitchBot 두두등장');
+    await opts.channels.push('#'+streamer);
+    await delete client;
+    client = await new tmi.client(opts);
+    client.on('message', onMessageHandler);
+    client.on('connected', onConnectedHandler);
+    client.connect();
+} 
 io.on('connection', (socket) => {
@@ -91,8 +139,17 @@ client.connect();
 // Called every time a message comes in
 function onMessageHandler (target, context, msg, self) {
   if (self) { return; } // Ignore messages from the bot
-  
   if (msg.startsWith('!')){
+    if(msg.startsWith('!번역')){
+      io.to(target.replace('#','')).emit('chat message',context["display-name"],msg.slice(4))
+      papago.trans(msg.slice(4), client, io, target)
+    }
+  }
+  else if(context["display-name"] == "빵_떡" 
+          || context["display-name"]=="Nightbot"
+          || context["display-name"]=="싹뚝"
+          || context["display-name"]=="KhuwitchBot"){
+    return;
   }
   else{
     io.to(target.replace('#','')).emit('chat message',context["display-name"],msg)
--- a/server/testviews/chat.ejs
View file @3151102
+++ b/server/testviews/chat.ejs
View file @3151102
@@ -50,8 +50,8 @@
 </head>
 <body>
 <select>
+  <option value="tmwardo">tmwardo</option>
   <option value="nnonuu">nnonuu</option>
-  <option value="bachelorchuckchuck">bachelorchuckchuck</option>
 </select>
 <ul id="messages"></ul>
 <form action="">
@@ -64,7 +64,7 @@
   $(() => {
     const name = prompt('What your name');
     const socket = io();
-    let room = ['nnonuu', 'bachelorchuckchuck'];
+    let room = ['tmwardo','nnonuu'];
     var streamer = room[0]
     let num = 0;
     socket.emit('joinRoom', streamer, name);
@@ -78,11 +78,11 @@
     });
-    $('form').submit(() => {
+    // $('form').submit(() => {
-      socket.emit('chat message', streamer, name, $('#m').val());
+    //   socket.emit('chat message', streamer, name, $('#m').val());
-      $('#m').val('');
+    //   $('#m').val('');
-      return false;
+    //   return false;
-    });
+    // });
     socket.on('chat message', (name, msg) => {
       $('#messages').append($('<li>').text(name + '  :  ' +