Socket.IO 是一个用于实现实时通信的 JavaScript 库。它基于 WebSocket，但也可以自动降级到轮询机制，以确保在不支持 WebSocket 的浏览器中也能正常工作。本文将介绍如何使用 Socket.IO 在 web 开发中实现实时通信功能。
安装 Socket.IO
首先，我们需要在项目中安装 Socket.IO。在命令行中进入项目目录，执行以下命令：
npm install socket.io
设置服务器端
在服务器端，我们需要创建一个 WebSocket 服务器。新建一个 server.js（或者任意其他的文件名），并在文件中添加以下代码：
const server = require('http').createServer();
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('New client connected');
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('Client disconnected');
});
});
server.listen(3000, () => {
console.log('Server listening on http://localhost:3000');
});
上述代码创建了一个基本的 WebSocket 服务器，并监听了 connection 事件以处理新客户端的连接请求。在连接成功后，服务器会打印出相应的信息，并监听客户端发送过来的 chat message 事件。收到该事件后，服务器会将消息广播给所有连接的客户端。
设置客户端
在客户端，我们需要创建一个 WebSocket 客户端，与服务器进行通信。新建一个 HTML 文件，比如 index.html，并在文件中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Chat Example</title>
</head>
<body>
<ul id="messages"></ul>
<form id="chat-form">
<input id="message-input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const form = document.getElementById('chat-form');
const input = document.getElementById('message-input');
const ul = document.getElementById('messages');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
ul.appendChild(li);
});
</script>
</body>
</html>
上述代码通过引入 Socket.IO 库创建了一个 WebSocket 的客户端实例，并在用户提交表单时发送了一个 chat message 事件到服务器。同时，它还会监听服务器发送过来的 chat message 事件，并在页面显示相应的内容。
运行应用程序
在命令行中进入项目目录，并执行以下命令启动应用程序：
node server.js
接下来，打开浏览器并输入 http://localhost:3000，你应该能够看到一个聊天框界面。在该界面上，你可以输入消息并发送给其他连接的客户端，同时也可以接收其他客户端发送的消息，并显示在页面上。
总结
使用 Socket.IO 实现实时通信功能非常简单，只需几行代码即可完成。通过服务器的广播，多个客户端可以实时地交流消息。这项技术在聊天应用、实时游戏、股票行情等领域有着广泛的应用前景。希望本文对于你在 web 开发中使用 Socket.IO 实现实时通信功能有所帮助。
本文来自极简博客，作者：微笑向暖，转载请注明原文链接：如何使用Socket.IO实现实时通信功能
