随着 Web 技术的不断发展，实时通信已经成为了现代 Web 应用的重要组成部分。而 Socket.io 是一种基于 Node.js 的实时通信框架，可以非常方便地实现客户端与服务端的实时通信。本文将介绍 Socket.io 的使用方法，包括安装、初始化、连接、发送和接收消息等，并提供示例代码供读者参考。
安装
首先，我们需要通过 npm 安装 Socket.io：
npm install socket.io
初始化
在服务端，我们需要创建一个 Socket.io 实例并监听指定端口：
const io = require('socket.io')(port);在客户端，我们需要引入 Socket.io 库并创建一个 Socket 实例：
<script src="/socket.io/socket.io.js"></script> <script> const socket = io(); </script>
连接
在客户端创建 Socket 实例后，我们需要连接到服务端：
socket.connect('http://localhost:3000');在服务端，我们需要监听连接事件：
io.on('connection', (socket) => {
console.log('a user connected');
});发送和接收消息
客户端和服务端通过发送和接收消息来实现通信。在客户端，我们可以通过 emit 方法发送消息：
socket.emit('message', 'hello');在服务端，我们可以通过 on 方法监听消息：
socket.on('message', (msg) => {
console.log(msg);
});示例代码
下面是一个简单的示例，实现了客户端和服务端之间的实时通信：
服务端：
// javascriptcn.com 代码示例
const io = require('socket.io')(3000);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('message', (msg) => {
console.log(msg);
io.emit('message', msg);
});
});客户端：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Socket.io Example</title>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
socket.connect('http://localhost:3000');
socket.on('message', (msg) => {
const li = document.createElement('li');
li.appendChild(document.createTextNode(msg));
document.getElementById('messages').appendChild(li);
});
document.getElementById('form').addEventListener('submit', (e) => {
e.preventDefault();
const input = document.getElementById('input');
socket.emit('message', input.value);
input.value = '';
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form id="form">
<input id="input" type="text">
<button type="submit">Send</button>
</form>
</body>
</html>在这个示例中，客户端通过表单发送消息，服务端接收到消息后将其广播给所有连接的客户端。客户端接收到消息后将其显示在页面上。
总结
本文介绍了 Socket.io 的使用方法，包括安装、初始化、连接、发送和接收消息等，并提供了一个简单的示例。Socket.io 可以非常方便地实现客户端与服务端的实时通信，适用于聊天室、游戏等需要实时通信的 Web 应用场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65802304d2f5e1655db44e2a