Socket.IO 是一个强大的 JavaScript 库,用于实现客户端和服务器之间的实时、双向通信。它广泛应用于实时聊天、游戏、直播等场景。以下是 Socket.IO 的一些基本概念和使用方法。
1. 连接和断开事件
io.on("connection", (socket) => {...})
: 当客户端连接到服务器时触发。socket.on("disconnect", () => {...})
: 当客户端断开连接时触发。
示例代码
javascript
// 服务器端
const io = require('socket.io')(3000);
io.on('connection', (socket) => {
console.log('客户端连接');
socket.on('disconnect', () => {
console.log('客户端断开连接');
});
});
2. 事件发送和监听
socket.emit(eventName, ...args)
: 向客户端或服务器发送事件。socket.on(eventName, (args) => {...})
: 监听来自客户端或服务器的事件。
示例代码
javascript
// 服务器端
io.on('connection', (socket) => {
socket.on('hello', (arg) => {
console.log(arg); // 'world'
socket.emit('hello', 'got it'); // 回复客户端
});
});
// 客户端
const socket = io('http://localhost:3000');
socket.emit('hello', 'world');
socket.on('hello', (arg) => {
console.log(arg); // 'got it'
});
3. 房间管理
socket.join(roomName)
: 将客户端加入到指定房间。socket.leave(roomName)
: 将客户端从指定房间移除。io.to(roomName).emit(eventName, ...args)
: 向指定房间内的所有客户端发送事件。
示例代码
javascript
// 服务器端
io.on('connection', (socket) => {
socket.join('room1');
io.to('room1').emit('message', 'Hello, room1!');
});
4. 错误处理
socket.io.on("error", (error) => {...})
: 监听连接错误。
示例代码
javascript
socket.io.on("error", (error) => {
console.log('连接错误:', error);
});
5. 重新连接
socket.io.on("reconnect", (attempt) => {...})
: 监听成功重新连接事件。socket.io.on("reconnect_attempt", (attempt) => {...})
: 监听重新连接尝试事件。
示例代码
javascript
socket.io.on("reconnect", (attempt) => {
console.log('成功重新连接,尝试次数:', attempt);
});
6. 心跳机制
Socket.IO 自带心跳机制,用于检测连接状态。心跳间隔可以通过配置进行调整。
7. 数据缓冲
当客户端断开连接时,数据会被缓冲,直到客户端重新连接。这种机制确保了数据不丢失。
总结
Socket.IO 为开发实时应用提供了强大的支持。通过这些基本的 API,你可以轻松实现实时通信、房间管理、错误处理等功能。以下是一个完整的示例代码,展示了如何使用 Socket.IO 建立一个简单的实时聊天应用:
javascript
// 服务器端
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('客户端连接');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('客户端断开连接');
});
});
server.listen(3000, () => {
console.log('服务器启动,监听端口 3000');
});
// 客户端(index.html)
const socket = io('http://localhost:3000');
document.getElementById('send').addEventListener('click', () => {
const message = document.getElementById('message').value;
socket.emit('chat message', message);
document.getElementById('message').value = '';
});
socket.on('chat message', (msg) => {
const item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
});
这个示例展示了如何使用 Socket.IO 实现实时聊天功能,包括客户端与服务器的连接、消息发送和接收。