Nodejs简单的websocket聊天室demo

Nodejs简单的websocket聊天室demo

最近在学习 websocket ，选择了ws 这个库，做了一个简单的聊天室demo，使用 Express 3 框架。

git clone https://github.com/feiyunruyue/chat-websocket

npm install

node app.js

代码托管在github上，chat-websocket 项目参考了国外的一篇blog，不同的是老外用的是WebSocket-Node。


6 回复

Nodejs简单的websocket聊天室demo

最近在学习 websocket，选择了 ws 这个库，做了一个简单的聊天室 demo，使用 Express 3 框架。

克隆项目并安装依赖

git clone https://github.com/feiyunruyue/chat-websocket
cd chat-websocket
npm install

启动应用

node app.js

代码托管

该项目的代码托管在 GitHub 上。项目参考了国外的一篇博客，不同的是老外用的是 WebSocket-Node。

示例代码

安装依赖

首先确保你已经安装了 express 和 ws 库。

npm install express ws

app.js 文件

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

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', function connection(ws) {
    console.log('A new client Connected!');
    
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
        
        // Broadcast to everyone else.
        wss.clients.forEach(function each(client) {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    ws.send('Welcome to the Chat Room!');
});

server.listen(8080, function listening() {
    console.log('Listening on %d', server.address().port);
});

代码解释

  1. 引入依赖

    • 使用 express 创建一个基本的 HTTP 服务器。
    • 使用 ws 库创建 WebSocket 服务器。

  2. 创建 WebSocket 服务器

    • WebSocket.Server 创建一个 WebSocket 服务器，并将其绑定到 HTTP 服务器上。

  3. 处理连接

    • 当有新的客户端连接时，触发 connection 事件，并打印一条日志。
    • 在连接中，监听 message 事件，当收到消息时，广播给其他所有在线的客户端。

  4. 发送欢迎信息

    • 当客户端连接时，向客户端发送一条欢迎信息。

  5. 启动服务器

    • 监听端口 8080 并开始服务。

总结

这个简单的聊天室 demo 展示了如何使用 ws 库来实现基本的 WebSocket 功能。你可以根据需要进一步扩展功能，例如添加用户身份验证、私聊等功能。


views/chat.html 能放出来？

用的sendfile，可以

为啥很不稳定了 ？需要另外对连接进行维护么？

这只是一个简单的小例子，帮助大家熟悉下websocket

Nodejs简单的websocket聊天室demo

最近在学习 websocket，选择了 ws 这个库，做了一个简单的聊天室demo，使用 Express 3 框架。

克隆代码仓库并运行

git clone https://github.com/feiyunruyue/chat-websocket.git
cd chat-websocket
npm install
node app.js

项目代码结构

该项目的代码托管在 GitHub 上，你可以通过以下链接访问：

示例代码

以下是基本的服务器端代码示例：

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

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

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

    ws.on('message', (message) => {
        console.log(`Received: ${message}`);
        
        // 广播消息给所有连接的客户端
        wss.clients.forEach((client) => {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

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

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

客户端代码示例

以下是基本的客户端代码示例：

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

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

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

        socket.onmessage = (event) => {
            const messagesDiv = document.getElementById('messages');
            messagesDiv.innerHTML += `<p>${event.data}</p>`;
        };

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

说明

  1. 服务端：创建一个 WebSocket 服务器，并监听连接、消息和关闭事件。当接收到消息时，将消息广播给所有连接的客户端。
  2. 客户端：创建一个 WebSocket 连接到服务器，并监听打开、消息和关闭事件。用户可以输入消息并发送到服务器，服务器再将消息广播回所有客户端。

这个简单的聊天室 demo 可以帮助你理解如何使用 ws 库来实现 WebSocket 通信。希望这对你的学习有所帮助！

回到顶部