웹 애플리케이션에서 WebSocket을 사용하여 실시간 채팅 기능을 구현하는 방법

M66 2025-07-14

개요

최신 웹 응용 프로그램에서 실시간 채팅 기능이 일반적인 요구 사항이되었습니다. 실시간 요구 사항을 충족시키기 위해 기존의 HTTP 프로토콜은 부도덕 한 것으로 보이며, WebSocket은 전이중 통신 프로토콜로서 저도 및 고효율 실시간 통신 솔루션을 제공 할 수 있습니다.

WebSocket은 HTML5에 추가 된 새로운 기술로 클라이언트와 서버 간의 지속적인 연결을 가능하게합니다. 기존의 HTTP 프로토콜과 비교할 때 실시간 성능이 높을뿐만 아니라 대역폭 소비를 줄이기 때문에 실시간 채팅 및 기타 시나리오에 널리 사용됩니다.

프론트 엔드 코드 구현

먼저 프론트 엔드에서 WebSocket 객체를 생성하고 서버를 통해 서버와 연결해야합니다. 간단한 프론트 엔드 코드 예는 다음과 같습니다.

 const socket = new WebSocket('ws://localhost:8000/chat');

// 성공적인 연결 설정 후 콜백 기능
socket.onopen = function() {
    console.log('WebSocket연결이 설정되었습니다');
};

// 콜백 기능 메시지를 수신 할 때
socket.onmessage = function(event) {
    const message = JSON.parse(event.data);
    console.log('메시지를 받았습니다：', message);
};

// 연결을 닫을 때 콜백 기능
socket.onclose = function() {
    console.log('WebSocket연결이 닫힙니다');
};

// 메시지 전송 기능
function sendMessage(message) {
    socket.send(JSON.stringify(message));
}

이 코드는 WebSocket을 통해 서버와 통신을 구현합니다. 연결이 성공하면`onopen '이벤트가 트리거됩니다. 서버 메시지가 수신되면`onmessage '이벤트가 트리거됩니다. 연결이 닫히면`onclose '이벤트가 트리거됩니다.

백엔드 코드 구현

다음으로 서버 측 WebSocket 처리 로직을 구현합니다. node.js의`ws '라이브러리를 사용하여 WebSocket 서버를 만듭니다. 백엔드 코드 예는 다음과 같습니다.

 const WebSocket = require('ws');

// 만들다WebSocket섬기는 사람
const wss = new WebSocket.Server({ port: 8000 });

// 保存所有连接到섬기는 사람的客户端
const clients = new Set();

// 클라이언트 연결 이벤트를 처리합니다
wss.on('connection', function(ws) {
    console.log('클라이언트가 연결되어 있습니다');
    // 클라이언트를 컬렉션에 추가하십시오
    clients.add(ws);

    // 处理메시지를 받았습니다的事件
    ws.on('message', function(message) {
        console.log('메시지를 받았습니다：', message);
        // 연결된 모든 클라이언트에게 메시지를 보냅니다
        clients.forEach(function(client) {
            client.send(message);
        });
    });

    // 연결 종료 이벤트를 처리합니다
    ws.on('close', function() {
        console.log('클라이언트가 문을 닫았습니다');
        // 컬렉션에서 클라이언트를 제거하십시오
        clients.delete(ws);
    });
});

서버 측 코드는 'WS'라이브러리를 통해 WebSocket 서버를 생성하고 포트 8000을 듣습니다. 클라이언트 연결이있을 때마다 클라이언트가 수집에 추가되어 메시지를 수신 할 때 모든 연결된 클라이언트에 전달됩니다.

시작 및 테스트

프론트 엔드 코드를 index.html 파일로 저장하고 백엔드 코드를 Server.js 파일로 저장하십시오. WebSocket 서버를 시작하려면 다음 명령을 실행하십시오.

 node server.js

그런 다음 브라우저에서 'index.html'파일을 열면 라이브 채팅 기능의 구현을 볼 수 있습니다. 브라우저의 개발자 도구를 통해 연결 및 메시지를 보내고받는 것을 관찰 할 수 있습니다.

요약

위의 예를 통해 WebSocket 프로토콜을 사용하여 웹 응용 프로그램에서 실시간 채팅 기능을 구현하는 방법을 보여줍니다. 이것은 기본적인 예이지만 실시간 응용 프로그램에서 WebSocket의 장점을 보여줍니다. 실제 요구에 따라 개발자는 메시지 저장, 보안, 사용자 인증 등과 같은 기능을 추가로 확장 할 수 있습니다.

WebSocket은 실시간 응용 프로그램 구축을보다 효율적이고 편리하게 만들고 채팅 및 협업 도구를 포함한 다양한 시나리오에 적합합니다. 새로운 기능을 지속적으로 최적화하고 추가하면보다 복잡하고 완벽하게 작동하는 라이브 채팅 애플리케이션을 구축 할 수 있습니다.