Socket.io 是一个实时通信库，可以在浏览器和服务器之间建立实时的双向通信。在前端开发中，Socket.io 可以用来实现聊天室、在线游戏等需要实时通信的应用。本文将介绍 Socket.io 的使用方法，并提供实例代码。
安装 Socket.io
在使用 Socket.io 之前，需要先安装它。可以使用 npm 命令进行安装：
npm install socket.io
安装完成后，在项目中引入 Socket.io：
const io = require('socket.io')();建立连接
在使用 Socket.io 前，需要先建立连接。在前端中，可以使用以下代码建立连接：
const socket = io('http://localhost:3000');在上面的代码中，http://localhost:3000 是服务器地址和端口号，可以根据实际情况修改。
发送和接收消息
建立连接后，可以使用 socket.emit() 方法向服务器发送消息，使用 socket.on() 方法接收服务器发送的消息。
以下是一个简单的示例：
// 发送消息
socket.emit('message', 'Hello, world!');
// 接收消息
socket.on('message', message => {
console.log(message);
});在上面的示例中，客户端向服务器发送了一条消息，服务器将这条消息发送回客户端。客户端接收到消息后，将其输出到控制台。
实现聊天室
使用 Socket.io 可以轻松地实现聊天室。以下是一个简单的聊天室示例：
// javascriptcn.com 代码示例
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Socket.io Chat Room</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', e => {
e.preventDefault();
const message = messageInput.value;
socket.emit('chat message', message);
messageInput.value = '';
});
socket.on('chat message', message => {
const li = document.createElement('li');
li.textContent = message;
messages.appendChild(li);
});
</script>
</body>
</html>// javascriptcn.com 代码示例
// server.js
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('disconnect', () => {
console.log('user disconnected');
});
socket.on('chat message', message => {
console.log('message: ' + message);
io.emit('chat message', message);
});
});
http.listen(3000, () => {
console.log('listening on *:3000');
});在上面的示例中，客户端可以向服务器发送消息，并在页面上显示所有的消息。服务器将接收到的消息广播给所有连接的客户端。
总结
本文介绍了 Socket.io 的使用方法，并提供了实例代码。使用 Socket.io 可以轻松地实现实时通信功能，如聊天室、在线游戏等。在实际开发中，可以根据需要进行扩展和优化。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656ddab9d2f5e1655d61b281