분류 Nodejs

간단한 채팅 앱을 구축하여 WebSockets 배우기

컨텐츠 정보

  • 조회 452 (작성일 )

본문

WebSocket API는 클라이언트 (사용자 브라우저)와 서버 간에 통신하는 방법입니다. 세션 중에 데이터가 양방향으로 실시간으로 흐를 수 있습니다. 즉, 클라이언트가 서버에 메시지를 보낼 수 있으며 서버는 폴링 할 필요 없이 다시 응답 할 수 있습니다. 

열린 채널을 통한 통신은 오래 지속되며 대기 시간이 짧습니다.


https://dev.to/spukas/learn-websockets-by-building-simple-chat-app-dee 


WebSockets 완벽한 사용 사례 :

  • 채팅 앱
  • 앱 추적
  • 실시간 청중 상호 작용
  • IoT 장치 업데이트

앱 구축 


WebSocket이 무엇을 할 수 있는지 더 잘 이해하기 위해 사용자가 실시간으로 메시지를 주고 받을 수 있는 간단한 채팅 앱을 만들어 봅시다.


앱의 경우 다음이 필요합니다.

  1. Node.js WS 용 WebSocket 라이브러리가 있는 Node.js 서버 설정
  2. WebSocket 인스턴스로 클라이언트 측 (HTML 및 client.js)을 작성하여 서버에서 메시지를 수신


서버 설정 


터미널에서 프로젝트를 초기화하십시오.


npm i -Y && npm i ws && touch server.js


이 명령은 프로젝트를 설정하고 ws 라이브러리를 설치하며 server.js 파일을 작성합니다.


편집기에서 server.js 파일을 열고 서버를 초기화하십시오.


const WebSocket = require('ws');

// starts server instance on http://localhost:8080
const wss = new WebSocket.Server({ port: 8080 });

// waits for connection to be established from the client
// the callback argument ws is a unique for each client
wss.on('connection', (ws) => {

  // runs a callback on message event
  ws.on('message', (data) => {

    // sends the data to all connected clients
    wss.clients.forEach((client) => {
        if (client.readyState === WebSocket.OPEN) {
          client.send(data);
        }
    });
  });
});


클라이언트 설정 


메시지를 입력하고 단추를 보내 메시지를 입력하는 간단한 HTML 파일을 작성하십시오. 이러한 파일이 생성 될 위치는 중요하지 않습니다. 함께 있는 한 다른 디렉토리에도 있을 수 있습니다.


<!DOCTYPE html>
<html>

<body>
    <div id="chat"></div>
    <input id="name" type="text" placeholder="name" />
    <input id="message" type="text" placeholder="message" />
    <button id="send">Send</button>

    <script src="client.js"></script>
</body>

</html>


client.js 파일의 경우 localhost : 8080에서 연결을 청취하도록 지정하여 WebSocket API 인스턴스를 작성합니다.


const connection = new WebSocket("ws://localhost:8080");

WebSocket 인스턴스인 연결에는 광범위한 이벤트 속성 목록이 있습니다. 이 예에서는 클라이언트를 알리지 않고 서버에 메시지를 보내는 데 가장 중요한 것만 사용합니다.

  • WebSocket.onopen - 연결이 열릴 때 호출
  • WebSocket.onclose - 연결이 닫힐 때 호출
  • WebSocket.onerror - 오류가 발생하면 호출
  • WebSocket.onmessage - 서버에서 메시지를 받으면 호출

그리고 완전한 client.js 파일은 다음과 같습니다 :


const connection = new WebSocket("ws://localhost:8080");
const button = document.querySelector("#send");

connection.onopen = (event) => {
    console.log("WebSocket is open now.");
};

connection.onclose = (event) => {
    console.log("WebSocket is closed now.");
};

connection.onerror = (event) => {
    console.error("WebSocket error observed:", event);
};

connection.onmessage = (event) => {
  // append received message from the server to the DOM element 
  const chat = document.querySelector("#chat");
  chat.innerHTML += event.data;
};

button.addEventListener("click", () => {
  const name = document.querySelector("#name");
  const message = document.querySelector("#message");
  const data = `<p>${name.value}: ${message.value}</p>`;

  // Send composed message to the server
  connection.send(data);

  // clear input fields
  name.value = "";
  message.value = "";
});


앱 실행 


프로젝트 디렉토리 내에서 터미널 실행 명령 node server.js의 별도 브라우저 탭에서 index.html 파일을 두 번 열고 메시지를 보내십시오. 두 클라이언트 인스턴스 모두 서버를 통해 실시간으로 메시지를 수신해야 합니다.


이것으로 튜토리얼을 마치고, 다음 멋진 프로젝트에 WebSocket을 사용하는 방법을 더 잘 이해했으면 합니다.



WebSockets