nodejs 채팅방은 작성하기 쉽나요?-프런트엔드 Q&A-php.cn

nodejs 채팅방은 작성하기 쉽나요?

WBOY

풀어 주다： 2023-05-11 19:38:05

원래의

553명이 탐색했습니다.

Node.js 채팅방: 단계별 구현

채팅방은 실시간 상호작용 및 사용자 경험 측면에서 매우 유용한 애플리케이션입니다. 최신 웹 개발 기술에서 Node.js를 사용하면 효율적인 실시간 채팅방을 신속하게 구축하고 탁월한 결과를 얻을 수 있습니다. 이 기사에서는 Node.js 채팅방의 구현을 설명하고 이것이 왜 그렇게 일반적인지, 어떻게 구축하는지 살펴보겠습니다.

서버와 클라이언트 모두 사용할 수 있는 프로그래밍 언어가 필요합니다. 이 경우 Node.js를 고려합니다. Node.js는 PHP나 Java와 같은 다른 백엔드 언어에 비해 많은 장점을 가지고 있으며, 그 중 가장 중요한 것은 이벤트 중심으로 설계되었다는 것입니다. 이를 통해 많은 수의 동시 연결을 더 효과적으로 처리하고 실시간 애플리케이션에서 데이터를 빠르게 처리할 수 있습니다.

사전 조건

Node.js 채팅방 구축의 첫 번째 단계는 Node.js와 npm(Node.js 패키지 관리자)을 설치하는 것입니다. 터미널을 열고 다음 명령을 입력합니다:

    $ sudo apt-get update
    $ sudo apt-get install nodejs
    $ sudo apt-get install npm

로그인 후 복사

npm을 사용하여 다음 3개 모듈을 설치합니다.

• 소켓.io: 웹 소켓을 더 쉽게 사용할 수 있습니다.

• 표현: 웹 애플리케이션 개발용.

• nodemon: 애플리케이션을 모니터링하고 변경 사항이 발생하면 다시 시작하는 데 사용됩니다.

다음 명령을 실행하여 설치하세요.

    $ sudo npm install socket.io express nodemon

로그인 후 복사

이제 Node.js를 사용하여 채팅방 구축을 시작할 준비가 되었습니다.

1. 웹 서버 만들기

Node.js 채팅방의 첫 번째 단계는 지정된 포트를 수신하는 웹 서버를 만드는 것입니다. 다음과 같이 할 수 있습니다.

    const app = require('express')();
    const server = require('http').Server(app);
    const io = require('socket.io')(server);

    app.get('/', (req, res) => {
        res.sendFile(__dirname + '/index.html');
    });

    server.listen(3000, () => {
        console.log('listening on *:3000');
    });

로그인 후 복사

코드는 먼저 express<를 사용합니다. /code> 모듈 HTTP 서버를 생성한 다음 <code>socket.io 모듈을 사용하여 웹 소켓 서버를 생성하고 마지막으로 서버가 포트 3000에서 수신 대기하여 브라우저에서 실행되도록 합니다. app.get() 메소드는 index.html 파일을 브라우저에 표시하는 데 사용됩니다. express模块创建一个HTTP服务器，然后使用socket.io模块创建Web套接字服务器，最后将服务器侦听端口3000以便在浏览器上运行。app.get()方法用于在浏览器中显示index.html文件。

2.在客户端上打开连接

浏览器连接到服务器上的Web套接字，经过两个步骤：

a.在HTML引用socket.io

在HTML文件中添加以下两行代码，以便能够引用socket.io-client：

    <script src="/socket.io/socket.io.js"></script>
    <script src="/main.js"></script>

로그인 후 복사

b.在客户端上打开连接

打开一个WebSocket连接，以便客户端能够连接到服务器上的套接字。代码如下：

    const socket = io();

로그인 후 복사

我们将连接到Node.js服务器并返回未定型的WebSocket，这样我们就可以开始通过套接字发送和接收消息。

实现向某个房间发送消息

现在我们的服务器已经准备好接收终端之间的连接。接下来，我们将看看如何像特定房间的连接发送消息。

    socket.on('join', (room) => {
        socket.join(room);
    });

    socket.on('message', (msg, room) => {
        socket.to(room).emit('message', msg);
    });

로그인 후 복사

代码中，我们在服务器上使用套接字的.join()方法来加入指定房间。当客户端发送'join'消息时，服务器将执行此操作。然后，服务器使用.to()

2. 클라이언트에서 연결을 엽니다.

다음 두 단계를 거쳐 브라우저가 서버의 웹 소켓에 연결됩니다.

a HTML에서 소켓.io를 참조합니다.

HTML에 다음 두 줄의 코드를 추가합니다. socket.io-client를 참조할 수 있는 파일:

    socket.emit('message', 'Hello World', 'room1');

로그인 후 복사

b. 클라이언트에서 연결 열기

클라이언트가 서버의 소켓에 연결할 수 있도록 WebSocket 연결을 엽니다. 코드는 다음과 같습니다.

    const users = {};

    socket.on('new-connection', () => {
        users[socket.id] = { name: `User ${Math.floor(Math.random() * 1000)}` };
        socket.broadcast.emit('user-connected', users[socket.id]);
    });

    socket.on('chat-message', (msg) => {
        socket.broadcast.emit('chat-message', { message: msg, name: users[socket.id].name });
    });

    socket.on('disconnect', () => {
        socket.broadcast.emit('user-disconnected', users[socket.id]);
        delete users[socket.id];
    });

로그인 후 복사

Node.js 서버에 연결하고 완료되지 않은 WebSocket을 반환하여 소켓을 통해 메시지를 보내고 받을 수 있습니다.

이제 우리 서버는 단말기 간 연결을 수신할 준비가 되었습니다. 다음으로 특정 방 연결에 메시지를 보내는 방법을 살펴보겠습니다.