줌 클론코딩 #1 CHAT WITH WEBSOCKETS

1. #1.0 Introduction (02:14)

실시간 채팅 기능.

websocket, JS

 

채팅방같은거 만드는 법도 배울 것.

event?

 

2. #1.1 HTTP vs WebSockets (09:05)

http : stateless?

backend가 유저를 기억하지 못한다.

 

auth?

서버는 나를 잊어버린다. stateless

백엔드서버는 response 후에 잊어버림.

request 받을 때만 답장(response)함   => real-time이 아니다.

 

WebSocket?

wss? Secure Web Socket : http와 다름. 연결되면 서버에서 클라이언트로도 먼저 대화 가능. 악수처럼

연결중일때만 가능. 서로 접근 가능. 서버는 언제나 유저에게 요청 가능. 유저도 마찬가지.

 

브라우저에는 내장된 webSocket API가 있다. 

webSocket은 프로그래밍 언어가 국한되지 않음. 그냥 프로토콜임.

 

브라우저와 backend 사이에서만 발생하지 않는다.

backend-backend 사이에서도 작동한다.(http도 동일함.)

 

http : stateless(backend는 기억 못하며, 답장만 가능)

webSocket : 한번 연결되면 양방향 연결(backend가 먼저 연락 가능)

 

다음시간은 웹소켓 서버를 만드는것 부터 시작할 것.

 

3. #1.2 WebSockets in NodeJS (11:34)

 ws라는 패키지를 사용해서 웹소켓 서버를 만들 것.

ws는 implementation. webSocket의 핵심 부분.

 

ws를 활용한 framework. 이미 채팅방 기능이 있는 프레임워크가 있음.

나중에는 프레임워크로 넘어갈 것이지만, 일단 ws에 대해서 잘 알아둘 필요가 있음.

 

npm i ws

 

현재 express는 http를 다룸.

이제 ws를 다룰 것. 다른 프로토콜.

 

const server = http.createServer(app);

const wss = new WebSocket.Server({ server });

내 http 서버에 access 하기 위해, http서버 위에 webSocket 서버를 만듦.

같은 포트에서 http request와 webSocket request를 다 처리할 수 있음.

 

재실행

npm run dev

 

http서버가 있으면 그 위에 ws서버를 만들 수 있다.

2개의 protocol이 같은 port를 공유하는 것.

 

우리 서버는 http protocal과 ws connection을 지원함.

원한다면 ws서버만 만들어도 된다.

 

여기선 views, static files, home, redirection을 원하기 때문에 http 서버도 연 것.

https://github.com/NewChoBo/zoom/commit/8888d5c0f518f5d509556cdf70f8008b583f4a00

 

4. #1.3 WebSocket Events (11:40)

웹소켓은 심지어 인터넷 익스플로어러에서도 지원할정도로 대부분의 브라우저가 지원한다.

webSocket은 listen할 특정한 event 명이 있다.

 

//server.js의 socket은 연결된 브라우저를 뜻한다.

//app.js의 socket은 서버로의 연결을 의미한다.

https://github.com/NewChoBo/zoom/commit/e2b81cc93f27fb9512f1f1a38a3fa084c5b846e3

 

5. #1.4 WebSocket Messages (12:37)

--플러터는 플러터만의 웹소켓 사용방식이 있는 모양. 나중엔 그걸 알아봐야 할듯.

 

https://nomadcoders.co/noom/lectures/3087/comments/56940

https://github.com/NewChoBo/zoom/commit/7bbb149da9197153153d764102e076a0bd1d22bc

 

6. #1.5 Recap (05:56)

웹소켓 자체는 쉬워보임. Node.js 설정이 더 어려울듯...

일단 대충 느낌은 보이는것같긴 한데...

 

Flutter + Node.js 게시판이라도 만들어봐야 감이 잡히려나

 

7. #1.6 Chat Completed (12:46)

현재는 서버와의 1대1 통신만 하고있음.

우리가 원하는건 클라이언트가 다른 클라이언트와 통신하는 것.

 

하지만, 그걸 위해서는 누가 연결이 되었는지 알아야 한다.

 

클라이언트가 연결될때마다 wss.on("connection", ...) 함수가 동작한다.

하지만, 몇명이 연결되었는지는 모름.

 

일단 fake database를 만들어볼 것.

      

      

      

    
    

      <java />
    
const sockets = []; 에 소켓이 연결될때마다 넣어줘서 나중에 접근할 수 있게 해두었다.

//클라이언트에게서 메세지 받음
socket.on("message", (message) => {
    sockets.forEach(aSocket => aSocket.send(message.toString('utf-8')));
    // socket.send(message.toString('utf-8'));
});

https://github.com/NewChoBo/zoom/commit/edef30c1e9c71c33e85fe82285437ab74da3b90a

 

8. #1.7 Nicknames part One (12:02)

메세지를 스크린에 보여주도록하는 함수 만들고,

닉네임 보내는 form도 만들어주었다.

 

하지만, back-end는 두개를 구분할 수 없다. 방법이 필요.

 

앞으로는 데이터로 JSON을 보내줄 것.

type이 뭔지, 뭐가 뭔지 지정해서...

 

백엔드는 메세지 구분.

 

socket은 String만 send할 수 있다.

JSON을 그대로 보내면 back-end는 [object Object] 처럼 이상하게 받아들임.

 

JSON.stringify({
        type:"nickname",
        payload:input.value,
    });

 

JSON.parse('{"type":"nickname","payload":"gdgd"}')

https://github.com/NewChoBo/zoom/commit/ab72a84cdfb296f41b940820ec6a83531794c037

 

9. #1.8 Nicknames part Two (13:18)

받는 서버가 JAVA일수도, JS일수도, Python, GO일 수도.

그래서 javascript object를 back-end로 보내선 안된다.

 

websocket이 브라우저에 있는 API이기 때문에.

백엔드는 다양한 프로그래밍 언어 가능하기에, API는 판단하면 안됨. 그래서 string을 보내는 것.

 

그리고, 백엔드에서는 받은 String을 언어에 맞춰 객체로 바꿔야함. (여기선 Javascript object)

 

      

      

      

    
    

      <javascript />
    
        // if(parsed.type === "new_message"){
        //     sockets.forEach(aSocket => aSocket.send(parsed.payload));
        // } else if(parsed.type === "nickname"){
        //     console.log(parsed.payload);
        // }
        switch (parsed.type){
            case "new_message":
                sockets.forEach(aSocket => aSocket.send(parsed.payload));
            case "nickname":
                console.log(parsed.payload);
        }

js에도 switch가 있었구나

case 끝나고 break 안하면 그 밑에꺼 쭉~ 실행됨.

 

닉네임을 socket안에 넣어준다?

socket이 누구인지 알고싶기 때문.

 

            case "nickname":

                // console.log(message.payload);

                socket["nickname"] = message.payload;

                break;

하지만, 익명 유저가 있을 가능성이 있다.

처음은 

wss.on("connection", (socket) => {

    sockets.push(socket);

    socket["nickname"] = "Anon";

로 초기화해주고, ID를 설정하면 socket 내의 nickname을 바꿔주는 것.

 

*socket 안에 정보를 저장할 수 있다.*

 

이걸 활용하면 귓속말도 보낼 수 있을까?

https://github.com/NewChoBo/zoom/commit/a5ffa1a62977d74a271b04b30ed38d74f2ebe068

 

10. #1.9 Conclusions (07:24)

new_message면 자신과 다른 브라우저에 전송.

보내는 자신도 sockets에 저장되어있음.

지금 자신이 보내는 코드를 화면에 그리지 않음.

그래서 서버에서 자신에게도 보내주게 하였었는데, 이제 나에게 보내지 않게 할테니 화면에 그리도록 바꿀것.

하지만, 전자로 하는게 카카오톡이나 그런것처럼 아이디를 공유하는 채팅서비스를 할 경우엔 더 좋은 방법이 될 것 같다.

 

서버에서 나를 제외한 모두에게 메세지를 전송하는 함수를 만들어보자.

 

다음시간엔 websocket을 쉽게 쓰게하는 framework.

...지금 채팅 2번씩 써지는건 그냥 두려나봄.

https://github.com/NewChoBo/zoom/commit/217f0e4d033ff2d59f51709d9b26423efe67b882