前言
近几年，随着Web应用的日益普及，实时性成为了Web开发中的一个重要话题。在很多场景下，如聊天室、游戏等等，我们需要实现即时通讯的功能。本文将介绍如何使用 Socket.io 实现即时通讯功能，并附带示例代码。
Socket.io 简介
Socket.io 是一个实现了 WebSocket 协议的 JavaScript 库，可以在客户端和服务器之间实现真正意义上的双向实时通信。为了支持传输的稳定性和兼容性，Socket.io 支持自适应的传输，可以在浏览器端自动降级为使用轮询或长轮询等传输方式。
Socket.io 是一个开放源代码的项目，支持跨平台使用。它的服务器端是基于 Node.js 构建的，客户端则是支持所有现代浏览器以及 Node.js 平台。
实现流程
环境准备
在开始学习之前，我们需要确保有 Node.js 运行环境，同时安装 Socket.io 库。打开命令行或终端窗口，输入以下命令进行安装：
npm install socket.io
服务端代码
服务端代码的实现非常简单，只需要监听一个端口，并等待客户端接入即可。我们的代码会监听全局所有的连接，并在有客户端接入的时候发出提示。
const io = require('socket.io')(port);
io.on('connection', (socket) => {
console.log('a user connected');
});为了完成真正的双向通讯，我们需要在此基础上添加一定的代码。Socket.io 提供了回调函数的方式，可以在客户端向服务器发送消息时进行响应处理。在本例中，我们定义了一个 chat message 事件，并接收到客户端发送过来的消息后，再将其广播给所有当前连接上的客户端。
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');
});
});客户端代码
客户端的代码相对较为简单，首先我们需要在 HTML 文件中导入 Socket.io 库文件：
<script src="/socket.io/socket.io.js"></script>
接着，我们可以编写一些 JavaScript 代码来处理服务器端发送过来的消息，并通过事件监听的方式将消息显示在页面上：
<script>
const socket = io();
$('form').submit((e) => {
e.preventDefault(); // 阻止表单默认提交行为，以确保实现 Ajax 异步提交
const msg = $('#m').val();
socket.emit('chat message', msg); // 向服务器发送消息
$('#m').val('');
return false;
});
socket.on('chat message', (msg) => {
$('#messages').append($('<li>').text(msg));
});
</script>示例代码
下面是一个完整的示例代码。该代码可以在 Chrome 和 Firefox 等现代浏览器中运行，同时也可以通过 Node.js 运行在服务器环境中。
服务端代码
const app = require('http').createServer(handler);
const io = require('socket.io')(app);
const fs = require('fs');
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server listening on port ${port}...`);
});
function handler(req, res) {
fs.readFile(__dirname + '/index.html', (err, data) => {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
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');
});
});客户端代码
<!doctype html>
<html>
<head>
<title>Socket.io chat</title>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<style>
* {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script>
const socket = io();
$('form').submit((e) => {
e.preventDefault(); // 阻止表单默认提交行为，以确保实现 Ajax 异步提交
const msg = $('#m').val();
socket.emit('chat message', msg); // 向服务器发送消息
$('#m').val('');
return false;
});
socket.on('chat message', (msg) => {
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>总结
使用 Socket.io 实现即时通讯功能非常简单，只需要专注于业务逻辑、关注用户体验即可。Socket.io 的兼容性和稳定性非常高，同时也可以很方便地在 Node.js 和浏览器端实现对于即时通讯的支持。最后附上 GitHub 仓库地址供读者参考：https://github.com/socketio/socket.io
如果您还不熟悉 Node.js 和 JavaScript 相关技术，请参考我的另一篇文章：Node.js 与 JavaScript 开发的那些事儿。
本文介绍了 Socket.io 的基本使用，如果您想要进一步学习 Socket.io 的高级用法，可以前往官方文档：https://socket.io/docs/v4/ 。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a22c27add4f0e0ffa3ad62