Node.js를 사용하여 웹 기반 실시간 채팅 기능을 구현하는 방법-JS 튜토리얼-php.cn

Node.js를 사용하여 웹 기반 실시간 채팅 기능을 구현하는 방법

PHPz

풀어 주다： 2023-11-08 11:57:50

원래의

1380명이 탐색했습니다.

Node.js를 사용하여 웹 기반 실시간 채팅 기능을 구현하는 방법

인터넷의 급속한 발전과 함께 실시간 커뮤니케이션 기능은 많은 웹사이트와 애플리케이션에서 필수 기능이 되었습니다. 가볍고 효율적인 이벤트 기반 비동기 I/O JavaScript 실행 환경인 Node.js는 고성능 실시간 애플리케이션을 빠르게 구축할 수 있으므로 실시간 통신 기능을 개발하기 위한 최선의 선택이 되었습니다. 이번 글에서는 Node.js를 사용하여 웹 기반 실시간 채팅 기능을 구현하는 방법을 자세히 소개하고 구체적인 코드 예시를 제공하겠습니다.

먼저 Node.js와 함께 제공되는 http 모듈을 사용하여 구현할 수 있는 기본 웹 서버를 구축해야 합니다. 구체적인 코드는 다음과 같습니다.

const http = require('http');
const server = http.createServer();

server.listen(3000, () => {
    console.log('服务器已启动，监听端口：3000');
});

로그인 후 복사

다음으로, 실시간 통신 기능을 구현하기 위해 소켓.io 모듈을 사용해야 합니다. Socket.io는 WebSocket 프로토콜을 기반으로 하는 실시간 통신 라이브러리이며 다양한 전송 방법과 호환되며 클라이언트와 서버 간의 양방향 통신을 지원하며 실시간 채팅 시나리오에 매우 적합합니다. 소켓.io 모듈을 설치하는 명령은 다음과 같습니다.

npm install socket.io

로그인 후 복사

설치가 완료된 후 서버 측에서 소켓.io 모듈을 사용하여 실시간 통신 기능을 활성화할 수 있습니다. 구체적인 코드는 다음과 같습니다.

const http = require('http');
const server = http.createServer();
const io = require('socket.io')(server);

io.on('connection', (socket) => {
    console.log('有一个用户已连接');

    socket.on('disconnect', () => {
        console.log('有一个用户已断开连接');
    });

    socket.on('chat message', (msg) => {
        console.log('收到一条新消息：' + msg);
        io.emit('chat message', msg);
    });
});

server.listen(3000, () => {
    console.log('服务器已启动，监听端口：3000');
});

로그인 후 복사

위 코드에서는 사용자가 연결할 때 발생한다는 뜻인 소켓.io의 연결 이벤트를 수신합니다. 사용자가 연결하면 콘솔에 프롬프트 메시지가 출력됩니다. 다음으로, 사용자가 연결을 끊을 때 트리거되는 소켓.io의 연결 해제 이벤트를 수신했습니다. 사용자가 연결을 끊으면 콘솔에도 프롬프트 메시지가 출력됩니다. 마지막으로 사용자로부터 새 메시지가 수신되었음을 나타내는 사용자 정의 채팅 메시지 이벤트를 수신했습니다. 새 메시지가 도착하면 모든 온라인 사용자에게 이를 방송합니다.

클라이언트 측에서는 서버에 연결하고 실시간 채팅 표시 및 전송을 구현하기 위해 소켓.io-client 모듈을 도입해야 합니다. 구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>实时聊天</title>
        <script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(function() {
                var socket = io();

                $('form').submit(function(e) {
                    e.preventDefault(); // 阻止表单提交
                    var msg = $('#m').val();
                    socket.emit('chat message', msg); // 发送消息到服务器
                    $('#m').val('');
                    return false;
                });

                socket.on('chat message', function(msg) { // 收到新消息
                    $('#messages').append($('<li>').text(msg));
                });
            });
        </script>
    </head>
    <body>
        <ul id="messages"></ul>
        <form>
            <input type="text" id="m" autocomplete="off" />
            <button>发送</button>
        </form>
    </body>
</html>

로그인 후 복사

위 코드에서는 소켓.io-client와 jQuery 모듈을 소개했습니다. 페이지가 로드된 후 서버와의 연결을 생성하고 채팅 메시지 이벤트를 수신합니다. 이는 새 메시지가 수신될 때 트리거된다는 의미입니다. 새 메시지가 도착하면 해당 메시지를 페이지의 메시지 목록에 추가합니다. 동시에 사용자가 입력 상자에 텍스트를 입력하고 보내기 버튼을 클릭하면 메시지가 서버로 전송됩니다.

요약하자면 Node.js와 소켓.io 모듈을 이용하여 WebSocket 프로토콜 기반의 실시간 채팅 기능을 구현했습니다. 실제 프로젝트에서는 영구 저장, 신원 인증, 메시지 푸시 등의 데이터를 확장하여 더욱 풍부한 실시간 커뮤니케이션 서비스를 제공할 수도 있습니다.

위 내용은 Node.js를 사용하여 웹 기반 실시간 채팅 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!