在前端开发中，实时通信是一项非常重要的技术。Node.js 提供了一个名为 socket.IO 的库，可以帮助开发者轻松实现实时通信功能。本文将详细介绍 socket.IO 的使用方法，包括基本概念、API 和示例代码。
基本概念
Socket
Socket 是一种在网络上进行通信的机制。在客户端和服务器之间建立一个 Socket 连接后，它们可以通过这个连接进行双向通信。Socket 连接是一种全双工的通信方式，意味着客户端和服务器可以同时发送和接收数据。
WebSocket
WebSocket 是一种基于 TCP 协议的网络协议，它允许客户端和服务器之间建立一个持久性的连接，实现实时通信功能。WebSocket 协议可以在浏览器和服务器之间建立一个 Socket 连接，使得客户端可以直接发送数据到服务器，而不需要通过 HTTP 协议。
socket.IO
socket.IO 是一个基于 WebSocket 协议的实时通信库，它可以在客户端和服务器之间建立一个 Socket 连接，并提供了一组易于使用的 API，使得开发者可以轻松实现实时通信功能。socket.IO 还支持多种协议，包括 WebSocket、HTTP 长轮询、HTTP 短轮询等。
API
服务器端 API
创建服务器
要创建一个 socket.IO 服务器，需要先引入 socket.IO 库，并调用其构造函数：
const io = require('socket.io')();监听连接事件
当客户端和服务器之间建立一个 Socket 连接后，会触发一个连接事件。可以使用 io.on() 方法来监听连接事件：
io.on('connection', (socket) => {
console.log('a user connected');
});在连接事件的回调函数中，可以获取到一个 socket 对象，它代表了客户端和服务器之间的 Socket 连接。
监听自定义事件
除了连接事件外，还可以监听自定义事件。可以使用 socket.on() 方法来监听自定义事件：
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
});在自定义事件的回调函数中，可以获取到事件传递的数据。
发送数据
可以使用 socket.emit() 方法来向客户端发送数据：
socket.emit('chat message', 'Hello World!');广播数据
可以使用 io.emit() 方法来向所有连接的客户端广播数据：
io.emit('chat message', 'Hello World!');断开连接
可以使用 socket.disconnect() 方法来断开客户端和服务器之间的 Socket 连接：
socket.disconnect();
客户端 API
连接服务器
要连接一个 socket.IO 服务器，需要在客户端引入 socket.IO 库，并调用其构造函数：
const socket = io();
发送数据
可以使用 socket.emit() 方法来向服务器发送数据：
socket.emit('chat message', 'Hello World!');监听自定义事件
可以使用 socket.on() 方法来监听自定义事件：
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
});在自定义事件的回调函数中，可以获取到事件传递的数据。
断开连接
可以使用 socket.disconnect() 方法来断开客户端和服务器之间的 Socket 连接：
socket.disconnect();
示例代码
以下是一个简单的聊天室示例，演示了如何使用 socket.IO 实现实时通信功能：
服务器端代码
// www.javascriptcn.com code example
const io = require('socket.io')();
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');
});
});
io.listen(3000);客户端代码
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Chat Example</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
font-size: 14px;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
}
#messages li {
margin-bottom: 10px;
}
#messages li:last-child {
margin-bottom: 0;
}
#message-input {
width: 100%;
padding: 10px;
border: none;
border-top: 1px solid #ccc;
font-size: 14px;
}
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="message-form">
<input id="message-input" type="text" autocomplete="off" />
<button>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.trim();
if (message) {
socket.emit('chat message', message);
messageInput.value = '';
}
});
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.innerText = msg;
messages.appendChild(li);
});
</script>
</body>
</html>在以上代码中，服务器端监听了一个名为 chat message 的自定义事件，当收到该事件时，会向所有连接的客户端广播数据。客户端监听了同样的自定义事件，并在收到数据时将数据添加到聊天记录中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d386dca941bf71346b76e3