随着 Web 应用的普及，越来越多的应用需要处理大量的并发请求。而传统的 HTTP 协议有着明显的缺陷，无法满足高并发请求的需求。这时候，Socket.io 就成为了一个非常好的解决方案。本文将介绍 Socket.io 的使用心得，并给出一些示例代码。
什么是 Socket.io？
Socket.io 是一个基于 Node.js 的实时应用程序框架，它提供了一种简单的方法来处理实时通信，如聊天室、游戏等。它支持多种传输协议，包括 WebSockets、AJAX 长轮询等，以及自动降级到传统轮询。使用 Socket.io，开发者可以轻松地创建实时应用程序，提高 Web 应用的并发量。
如何使用 Socket.io？
首先，我们需要安装 Socket.io。在 Node.js 环境下，可以通过 npm 安装：
npm install socket.io
接下来，在服务器端，我们需要创建一个 Socket.io 实例，并监听连接事件：
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
});在客户端，我们需要引入 Socket.io 库，并连接到服务器：
<script src="/socket.io/socket.io.js"></script> <script> const socket = io(); </script>
这样，客户端和服务器就建立了连接。接下来，我们就可以使用 Socket.io 提供的 API 进行实时通信了。
Socket.io 的 API
Socket.io 提供了一系列的 API，用于实现实时通信。这里介绍一些常用的 API。
监听事件
socket.on(event, callback);
该方法用于监听指定事件，并在事件触发时执行回调函数。例如，我们可以监听 chat message 事件，并在收到消息时输出到控制台：
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
});触发事件
socket.emit(event, data);
该方法用于触发指定事件，并向服务器发送数据。例如，我们可以触发 chat message 事件，并向服务器发送一条消息：
socket.emit('chat message', 'hello world');广播事件
socket.broadcast.emit(event, data);
该方法用于向除当前客户端外的所有客户端广播指定事件，并发送数据。例如，我们可以向所有客户端广播 user connected 事件：
socket.broadcast.emit('user connected');房间管理
socket.join(room); socket.leave(room);
该方法用于加入或离开指定的房间。例如，我们可以将当前客户端加入到 room1 房间：
socket.join('room1');socket.leave('room1');io.to(room).emit(event, data);
该方法用于向指定房间内的所有客户端广播指定事件，并发送数据。例如，我们可以向 room1 房间内的所有客户端广播 message 事件：
io.to('room1').emit('message', 'hello room1');示例代码
下面是一个简单的聊天室应用的示例代码。该应用使用 Socket.io 实现实时通信，并支持多房间。
服务器端代码：
// www.javascriptcn.com code example
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('chat message', (msg) => {
io.to(socket.room).emit('chat message', msg);
});
socket.on('join room', (room) => {
if (socket.room) {
socket.leave(socket.room);
}
socket.join(room);
socket.room = room;
socket.emit('room joined', room);
});
});
http.listen(3000, () => {
console.log('listening on *:3000');
});客户端代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>Socket.io Chat Room</title>
</head>
<body>
<h1>Socket.io Chat Room</h1>
<div>
<label>Room:</label>
<select id="room">
<option value="room1">Room 1</option>
<option value="room2">Room 2</option>
</select>
<button id="join">Join</button>
</div>
<div>
<ul id="messages"></ul>
<form id="form">
<input id="input" autocomplete="off" />
<button>Send</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const room = document.querySelector('#room');
const joinBtn = document.querySelector('#join');
const messages = document.querySelector('#messages');
const form = document.querySelector('#form');
const input = document.querySelector('#input');
joinBtn.addEventListener('click', () => {
socket.emit('join room', room.value);
});
socket.on('room joined', (room) => {
messages.innerHTML = '';
console.log('joined room:', room);
});
form.addEventListener('submit', (e) => {
e.preventDefault();
const msg = input.value.trim();
if (msg) {
socket.emit('chat message', msg);
input.value = '';
}
});
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
messages.appendChild(li);
});
</script>
</body>
</html>在浏览器中打开 http://localhost:3000，即可进入聊天室应用。可以选择不同的房间，并和其他用户实时聊天。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d93529a941bf71340bf1f9