Update: socket io client 기본 동작. integrate해야할 사항 주석에 표기

@@ -5,6 +5,31 @@ import PersonIcon from "@material-ui/icons/Person";
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 import PauseIcon from '@material-ui/icons/Pause';
 import PauseIcon from '@material-ui/icons/Pause';
 import { WatchOutlined } from "@material-ui/icons";
 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) {
 export function Channel(props) {
     const channel = props.channel;
     const channel = props.channel;
@@ -34,6 +59,7 @@ export class ChannelList extends React.Component {
         
         
         // data for test
         // data for test
         const 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": "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": "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": "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": "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": "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": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
+            
         ]
         ]
 
 
         this.state = {
         this.state = {