在上一篇中，我们介绍了 Socket.IO 库，它为我们提供了一个强大的工具来实现 WebSocket 连接和实时通信。在本篇中，我们将利用 Socket.IO 来构建一个简单的实时聊天应用，让我们深入理解如何利用 WebSocket 和 Socket.IO 实现实时聊天功能。
实时聊天应用的基本结构
在实现我们的聊天应用之前，让我们先了解一下基本结构。我们的聊天应用将包括：
- 客户端：使用 HTML 和 JavaScript 创建用户界面。
- 服务器端：使用 Node.js 和
Socket.IO 创建 WebSocket 服务器。
- 实时功能：通过 WebSocket 实现用户之间的消息实时发送与接收。
环境准备
在开始编码之前，我们先确保已安装了以下工具：
接下来，我们创建一个新的项目文件夹，并初始化 npm：
1
2
3
| mkdir chat-app
cd chat-app
npm init -y
|
安装 Socket.IO 包：
1
| npm install socket.io express
|
服务器端实现
在项目根目录下创建一个名为 server.js 的文件，并输入如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('chat message', (msg) => {
console.log('Message: ' + msg);
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
|
上述代码中，我们首先引入了必要的库，并创建了一个 HTTP 服务器。我们通过 io.on('connection', ...) 监听用户的连接，并通过 socket.on('chat message', ...) 监听聊天消息。当用户发送消息时，服务器将接收并广播此消息给所有连接的客户端。
客户端实现
在项目根目录下创建一个名为 index.html 的文件，并输入如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
<style>
ul { list-style-type: none; margin: 0; padding: 0; }
li { padding: 8px; margin-bottom: 10px; background-color: #f3f3f3; border-radius: 5px; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="" autocomplete="off"><input id="m" autocomplete="off" /><button>Send</button></form>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const form = document.getElementById('form');
const input = document.getElementById('m');
const messages = document.getElementById('messages');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', function(msg) {
const item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>
|
在此代码中，我们创建了一个简单的聊天界面，其中包含一个消息列表和一个发送表单。当用户提交表单时，会通过 socket 发送消息，并自动清空输入框。接收到消息时，客户端会将其添加到消息列表中。
运行应用
现在，我们可以启动聊天应用。在终端中运行以下命令：
然后在浏览器中访问 http://localhost:3000，我们可以打开多个浏览器窗口进行测试。当在一个窗口输入消息时，其他窗口会实时显示已发送的消息。
进一步思考
实时聊天应用的基本实现方式已经完成。在下一篇中，我们将讨论聊天应用中的 安全性与认证机制，以保障用户数据安全和防止恶意攻击。对实时通信的安全性考虑是构建任何网络应用中的重要一环，希望大家对此有所关注。
通过本篇的学习，你应该对 WebSocket 和 Socket.IO 的应用有了更深入的理解，并能够在自己的项目中实现类似的实时通信功能。继续探索和实践吧！
