介绍
Socket.io 是一个实时的、双向的、基于事件的通信库，它可以在浏览器和服务器之间建立实时的、持久的连接，从而实现实时通信。在前端开发中，Socket.io 可以用来实现聊天室、在线游戏、实时数据可视化等功能。
本文将介绍如何使用 Socket.io 实现简单聊天室功能的步骤，包括服务器端和客户端的代码示例。
步骤
1. 安装 Socket.io
首先需要安装 Socket.io 库，可以使用 npm 进行安装：
npm install socket.io
2. 创建服务器
接下来需要创建一个服务器程序，用于处理客户端的连接和消息发送。
// javascriptcn.com 代码示例
const http = require('http');
const socketio = require('socket.io');
const server = http.createServer();
const io = socketio(server);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('message', (message) => {
console.log('received message:', message);
io.emit('message', message);
});
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});上述代码使用 Node.js 中的 http 模块创建一个 HTTP 服务器，然后使用 Socket.io 将服务器升级为 WebSocket 服务器。在服务器启动后，当有客户端连接时，会触发 connection 事件，并输出日志信息。当客户端发送消息时，会触发 message 事件，并将消息发送给所有连接的客户端。当客户端断开连接时，会触发 disconnect 事件。
3. 创建客户端
接下来需要创建一个客户端程序，用于连接到服务器并发送和接收消息。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Socket.io Chat</title>
</head>
<body>
<ul id="messages"></ul>
<form id="message-form">
<input type="text" id="message-input">
<button type="submit">Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const messages = document.getElementById('messages');
const messageForm = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
messageForm.addEventListener('submit', (event) => {
event.preventDefault();
const message = messageInput.value;
socket.emit('message', message);
messageInput.value = '';
});
socket.on('message', (message) => {
const li = document.createElement('li');
li.textContent = message;
messages.appendChild(li);
});
</script>
</body>
</html>上述代码是一个简单的 HTML 页面，其中包含一个用于显示消息的 <ul> 元素和一个用于发送消息的表单。在页面加载完成后，会使用 Socket.io 的客户端库连接到服务器。当用户提交表单时，会触发 submit 事件，将表单中的消息发送给服务器。当客户端收到服务器发来的消息时，会触发 message 事件，并将消息添加到页面中。
4. 运行程序
最后，需要运行服务器程序和客户端程序。可以使用以下命令在命令行中启动服务器：
node server.js
然后在浏览器中打开客户端程序所在的 HTML 文件，即可进入聊天室并发送和接收消息。
总结
本文介绍了使用 Socket.io 实现简单聊天室功能的步骤，包括服务器端和客户端的代码示例。通过本文的学习，读者可以了解如何使用 Socket.io 实现实时通信，并在此基础上开发更复杂的实时应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6506b68695b1f8cacd26d627