NodeJS - WebSocket, CHAT

---

목차

1. WEBSOCKET

2. 브라우저에서 사용해보기

3. socket.io 사용해보기

 

---

 

 

 

1. WEBSOCKET

- 주로 채팅, 좌석예매시스템에 사용되는 새로운 프로토콜 ws:// 을 사용한다.

  - 브라우저 websocket 내장객체가 있고, NodeJS에서는 ws를 사용

  - 외부 라이브러리로 socket.io

 

 

 

- server

const WebSocket = require("ws");
const wss = new WebSocket.Server({port: 8080}); // 서버실행 == app.listen 과 같아

wss.on("connection", (ws) => {
    // console.log(ws); // client의 객체정보 접속하는것마다 생성될거임
    ws.on("message", (chunk) => {
        // console.log(chunk); // <Buffer eb b0 9b ec 95 84 eb 9e 8f 21 21 21 21 21 21>
        console.log(chunk.toString());
        ws.send("받았다고!!!!");
    });

    ws.on("close", () => {
        console.log(`client 연결 종료`); // 클라이언트가 연결을 끊었을때 실행되는 함수!
    });
});

 

 

- client

const WebSocket = require("ws");
const ws = new WebSocket("ws://127.0.0.1:8080"); //3hand하는

ws.on("open", () => {
    console.log(`connect!!!`);
    ws.send("받아랏!!!!!!");
});

ws.on("message", (chunk) => {
    console.log(chunk.toString());
});

 

 

 

2. 브라우저에서 사용해보기

 

- 채팅을 한다고 하면 브라우저 2개가 우리서버에 접속한거라고 생각하고 작성해야한다!

- A가 "hi"라고 서버에 보내면 서버는 "hi"를 B에게 보내주는!

  - 다수일경우 서버는 "hi"를 작성한 사람을 제외하고 전부 보내줘야한다! 

 

- server와 client로 디렉토리를 나눈다.

 

 - client

   - server 세팅을하고 render() 할 index.html을 작성한다,

      - index.html안에 inputbox로 입력한 내용을 submit할수있게 form태그를 작성한다,

      - script 안에 addEventListner("submit")

 <ul id="chat"></ul>
<div>
    <form id="frm">
        <input type="text" name="message" />
        <button type="submit">SEND</button>
    </form>
</div>

const socket = new WebSocket("ws://127.0.0.1:3000");

const frm = document.querySelector("#frm");
const chat = document.querySelector("#chat");

socket.addEventListener("message", (e) => {
    console.log(`server에서 부터 받은 메시지 ${e.data}`);

    const li = document.createElement("li");
    li.innerHTML = e.data;
    chat.append(li);
});

frm.addEventListener("submit", (e) => {
    e.preventDefault();
    const {
        message: {value: message},
    } = e.target;

    const li = document.createElement("li");
    li.classList.add("right");
    li.innerHTML = message;
    socket.send(message);

    chat.append(li);

    e.target.reset();
    // e.target.message.focus();
});

 

 

 

 - server

   - server세팅을 하고 WebSocket으로 서버를 연다.

   

const WebSocket = require("ws");
const app = require("./app");

let sockets = [];
// 브라우저 하나 더 열어서 2개 일단 담아졌을것임

const wss = new WebSocket.Server({
    // server port에서 websocket을 뽑아다가 쓰는
    // 웹서버와 소켓이 같이
    server: app.listen(3000, () => {
        console.log(`server start!!!`);
    }),
});

wss.on("connection", (ws, req) => {
    // console.log(ws);
    console.log(`${req.connection.remoteAddress} 연결되었음!!!!!!!!`);
    sockets.push(ws);

    ws.on("message", (chunk) => {
        for (const client of sockets) {
            if (client === ws) continue;
            // 자기자신을 안담는
            // console.log(`aaa`);
            client.send(chunk.toString());
            //그래서 나를 제외한 모우에게 send
        }

        // console.log(chunk.toString());
        // ws.send("받았다고!!!!");
    });

    ws.on("close", () => {
        sockets = sockets.filter((v) => v !== ws);
        // 나를 빼고 재할당하겠다는것!!!!!!!!!!
        console.log(`client 연결 종료`);
    });
});

 

 

 

- ws는 프로토콜을 직접 구현해야해서 불편한점이 있다. 

  - message기준으로 다받는걸로 설정을 해두어서 다른 기능을 추가할때매다 조건문을 달아주어야만한다..

- 그런이유로 그룹채팅 같은 기능을 만들기도 어렵다!

- 그래서 채팅을 만든다고하면 socket.io 라이브러리를 사용한다!

 

 

 

 

3. socket.io 사용해보기

 

 

 

 

 

※ 작업해볼것

- 닉네임을 넣어서 작성한 사람 구별하기

 

---

※ socket.io 공식문서

https://socket.io/docs/v4/tutorial/introduction