Nodejs chat源码解读（二）

Nodejs chat源码解读（二）

赏心悦目的文章

8 回复

当然可以。在“Nodejs chat源码解读（二）”中，我们将深入探讨一个简单的聊天室应用的实现逻辑，特别是如何使用WebSocket来实现实时通信功能。

WebSocket 实现

在上一篇文章中，我们介绍了如何设置基本的HTTP服务器。现在，我们将引入WebSocket来支持实时消息传递。这里我们使用ws库，它是一个简单且流行的WebSocket库。

安装 ws 库

首先，确保已经安装了ws库。如果没有安装，可以通过npm进行安装：

npm install ws

WebSocket 服务器初始化

接下来，在你的项目中创建一个WebSocket服务器，并将其与现有的HTTP服务器集成。下面是一个简单的例子：

const http = require('http');
const WebSocket = require('ws');

// 创建 HTTP 服务器
const server = http.createServer((req, res) => {
    res.writeHead(200);
    res.end('Welcome to the Chat Server!');
});

// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ server });

wss.on('connection', (socket, req) => {
    console.log('Client connected.');

    // 监听来自客户端的消息
    socket.on('message', message => {
        console.log(`Received: ${message}`);

        // 广播消息给所有连接的客户端
        wss.clients.forEach(client => {
            if (client !== socket && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    socket.on('close', () => {
        console.log('Client disconnected.');
    });
});

server.listen(3000, () => {
    console.log('Server started on port 3000');
});

这段代码首先创建了一个HTTP服务器，然后初始化了一个WebSocket服务器，该服务器监听客户端的连接请求。每当一个新的客户端连接到WebSocket服务器时，就会触发connection事件。在这个事件处理程序中，我们设置了监听消息和关闭连接的事件处理器。

当接收到客户端发送的消息时，服务器会将该消息广播给所有其他在线的客户端。这样就实现了基本的聊天功能。

总结

通过上述代码，我们可以看到，WebSocket使得实现实时通信变得非常简单。通过监听特定事件并相应地处理消息，我们可以构建出一个功能齐全的聊天应用。在后续的文章中，我们还将讨论如何增加更多的特性，如用户认证、房间管理等。

希望这篇文章对你有所帮助！


node chat的前后端交互机制设计的非常优雅，这篇文章介绍的也非常到位非常棒。 <br/> <br/>我在看这部分源码的时候一直有个问题： <br/>我们知道，每当有新消息到达服务器的时候，node chat都会以这个新消息为参数，来将callbacks数组中的回调函数依次调用一遍，这样，每个用户都会接收到这条消息。 <br/>从node chat 的运行结果上看，好像每个callback都是与某一个用户相关联的，但是我并没有在代码中找到这种关联，node chat 怎么就知道哪一个callback是对应于哪一个用户的呢？

与“用户相关联”是HTTP协议自身保证的。客户端（浏览器）发一个HTTP请求过去，server给返回一些数据… 只不过node chat设计上当没有新数据的时候这个请求不会立刻返回，而是阻塞在那里而已，直到有新数据或者超时

我看这个callback是所有用户的都会调用吧，而不是和用户关联。

每个会话（session，或者可以理解为用户）分别阻塞一个调用

huangshaoqiang用户的疑惑也是我第一次看chat源码时侯唯一费解的地方。 <br/>后来发现确实callbacks这个数组的运行各个callback函数会自动对应某个用户去response.write响应东西，不会发生广播的情况。具体原因请高手指点~~

很明显啊，res没有end，连接就一直不会中断啊，主要过程跟消息队列差不多，只是利用了js的闭包，把response闭包到回调函数里，response包含底层tcp的socket，懂了吧。

好的，让我们来解读一下Node.js聊天应用的源码。在这一篇中，我们将重点关注如何实现基本的消息发送与接收功能。

概述

在上一篇中，我们已经搭建了一个基础的服务器环境，并处理了客户端的连接。在这篇中，我们将实现消息的发送和接收功能。

实现思路

  1. 客户端发送消息：客户端通过WebSocket发送文本消息到服务器。
  2. 服务器接收消息：服务器接收到消息后，将其广播给所有已连接的客户端。
  3. 客户端接收消息：所有客户端都订阅了消息广播事件，当服务器广播新消息时，它们将显示该消息。

示例代码

假设我们使用ws库作为WebSocket服务端。

1. 安装依赖

npm install ws

2. 服务器端代码

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('Client connected');
    
    // 当接收到消息时触发
    ws.on('message', (message) => {
        console.log(`Received message => ${message}`);
        
        // 广播消息给所有连接的客户端
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

3. 客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat Client</title>
</head>
<body>
    <input type="text" id="messageInput" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>
    <ul id="messages"></ul>

    <script>
        const socket = new WebSocket('ws://localhost:8080');

        socket.onopen = () => {
            console.log('Connected to server');
        };

        socket.onmessage = (event) => {
            const messages = document.getElementById('messages');
            const messageItem = document.createElement('li');
            messageItem.textContent = event.data;
            messages.appendChild(messageItem);
        };

        function sendMessage() {
            const input = document.getElementById('messageInput');
            socket.send(input.value);
            input.value = '';
        }
    </script>
</body>
</html>

解释

  1. 服务器端：

    • 创建WebSocket服务器并监听端口8080。
    • 当有新的客户端连接时，打印日志。
    • 当接收到客户端消息时，打印消息并广播给所有其他客户端。
    • 处理客户端断开连接的情况。

  2. 客户端：

    • 创建WebSocket连接到服务器。
    • 当连接打开时，打印日志。
    • 接收服务器广播的消息并在页面上显示。
    • 提供一个简单的输入框和按钮，用于发送消息。

通过以上代码，我们实现了基本的聊天功能。下一次我们可以进一步增强功能，例如增加用户身份验证、历史消息记录等功能。

回到顶部