Node.js用Socket.IO做聊天软件的实现示例

下面是针对“Node.js用Socket.IO做聊天软件的实现示例”的完整攻略：

简介

Socket.IO 是一个实时应用程序框架，它允许任意传输底层通信机制，同时向应用程序层提供了良好的抽象。该框架可广泛应用于实时应用程序（例如实时聊天，协作编辑等）。

如何在 Node.js 中使用 Socket.IO 实现聊天室？

步骤

以下是使用 Socket.IO 创建聊天应用程序的简要步骤。

安装 Node.js 和 NPM。
创建项目目录，并通过 npm 初始化命令它：

bash mkdir socket-io-chat cd socket-io-chat npm init
安装 socket.io 和 express 包：

bash npm install --save socket.io express
编写 server.js 文件，用于启动服务器和建立 Socket.IO 连接：

``` javascript
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const io = require('socket.io')(server);

const port = process.env.PORT || 3000;

server.listen(port, () => {
console.log(Server listening on port ${port});
});

app.use(express.static(__dirname + '/public'));

io.on('connection', (socket) => {
console.log('User connected');
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
```

这个文件完成了以下操作：
- 创建 express 应用程序和 HTTP 服务器。
- 使用 Socket.IO 初始化此服务器。
- 将静态公共路径设置为 public 目录。
- 监听连接事件，当用户连接到 Socket.IO 时执行。
在 public 目录下创建 index.html 文件，创建聊天应用程序的前端：

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Socket.IO Chat App</title> </head> <body> <ul id="messages"></ul> <form action=""> <input id="message" autocomplete="off" /><button>Send</button> </form> <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="main.js"></script> </body> </html>

这个文件包含了以下要素：
- 表单：Input 和提交按钮，用于发送消息。
- 无序列表：用于呈现消息。
- 脚本链接：用于在前端中加载 Socket.IO 库和主 JavaScript 文件。
在 public 目录下创建 main.js 文件，建立与 Socket.IO 的连接：

``` javascript
const socket = io();
const messages = document.getElementById('messages');
const form = document.querySelector('form');
const input = document.getElementById('message');

form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});

socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
});
```

该文件完成以下操作：
- 建立与 Socket.IO 服务器的连接。
- 获取和处理消息和表单元素，并在用户提交表单后发送消息。
- 接收 chat message 事件，将消息呈现在无序列表中。
启动服务器：

bash node server.js
打开浏览器，并输入 URL：http://localhost:3000。你会看到一个空白聊天室，可以向其中发送消息了。

示例说明

示例1：在服务器端添加昵称

你需要让用户设置昵称，将其附加到每个消息中，并在聊天室中显示。

为此，请使用以下代码修改 server.js：

io.on('connection', (socket) => {
    console.log('User connected');

    socket.on('new user', (name) => {
        console.log(`New user: ${name}`);
        socket.username = name;
    });

    socket.on('chat message', (msg) => {
        console.log(`Message received from ${socket.username}: ${msg}`);
        io.emit('chat message', `<strong>${socket.username}:</strong> ${msg}`);
    });

    socket.on('disconnect', () => {
        console.log('User disconnected');
    });
});

客户端代码：

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const input = document.getElementById('message');

    if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
    }
});

socket.on('chat message', (msg) => {
    const item = document.createElement('li');
    item.innerHTML = msg;
    messages.appendChild(item);
});

为了允许用户设置名称，您需要更改 form，并将名称作为参数发送到服务器：

<form action="">
  <input id="message" autocomplete="off" />
  <input id="name" autocomplete="off" placeholder="Name" />
  <button>Send</button>
</form>

然后，需在客户端代码的初始化期间向服务器发送此名称。

要在客户端代码中附加用户名，请将以下代码添加到 form 侦听器中：

const nameInput = document.getElementById('name');
socket.emit('new user', nameInput.value);

示例2：实现私聊功能

在聊天室中实现私聊功能，允许用户向其他用户发送私人消息，而不是在整个聊天室中广播消息。实现此功能需要以下步骤：

创建一个用于姓名的数组，用作“在哪里”的参考：

javascript let users = [];
修改 new user 监听器以存储用户名，并在数组中添加它：

`` javascript socket.on('new user', (name) => { console.log(New user: ${name}`);
socket.username = name;
```
users.push(name);
io.emit('user list', users);
```
});
```
在客户端发出“私聊”事件时，服务器应在其他用户上广播此事件：

`` javascript socket.on('private message', ({ content, to }) => { const from = socket.username; console.log(Private Message From ${from} to ${to}: ${content}`);
```
const recipientSocket = io.sockets.sockets.find(
  s => s.username === to
);

if (recipientSocket) {
    recipientSocket.emit('private message', {
        content,
        from,
    });
}
```
});
```
在客户端，为每个用户添加单击事件监听器，以允许它们单击特定的元素以与该用户进行通信。当此事件发生时，应生成“私聊”事件，将聊天内容和接收者的用户名传递给服务器。

客户端代码：

usersList.addEventListener('click', (e) => {
    if (e.target && e.target.nodeName === 'LI' && e.target.innerText != nameInput.value) {
        const to = e.target.innerText;
        const content = prompt(`Enter a private message to ${to}:`);
        socket.emit('private message', {
            content,
            to,
        });
    }
});

socket.on('private message', ({ content, from }) => {
    const item = document.createElement('li');
    item.innerHTML = `<i>${from} (Private): </i>${content}`;
    messages.appendChild(item);
});

还需添加HTML代码：

<h3>User List</h3>
<ul id="users"></ul>

请注意，通过删除或添加 HTML、CSS 或 JavaScript，可以定制聊天应用程序以满足您的需要。

以上就是 Node.js 与 Socket.IO 实现聊天室的完整攻略和两个示例，如果还有其他细节不理解的地方，欢迎在评论区留言提问。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Node.js用Socket.IO做聊天软件的实现示例 - Python技术站

Node.js用Socket.IO做聊天软件的实现示例

简介

步骤

示例说明

示例1：在服务器端添加昵称

示例2：实现私聊功能

相关文章