什么是 Socket.io?
Socket.io 是一个基于 Node.js 的实时网络应用程序框架,它提供了实时、双向的通信机制,使得客户端和服务器可以实时地进行通信。Socket.io 可以用于构建实时聊天应用程序、实时协作工具、实时游戏等应用程序。
Socket.io 的基本用法
安装
在使用 Socket.io 之前,需要先安装 Socket.io 模块。可以使用 npm 命令进行安装:
npm install socket.io
服务器端代码
在服务器端,需要使用以下代码来启动 Socket.io 服务器:
// www.javascriptcn.com code example
const http = require('http');
const server = http.createServer();
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});这段代码创建了一个 HTTP 服务器,并在该服务器上启动 Socket.io 服务器。在 io.on('connection', ...) 中,我们监听了连接事件,并在连接建立时输出一条日志。在 socket.on('disconnect', ...) 中,我们监听了断开连接事件,并在连接断开时输出一条日志。
客户端代码
在客户端,需要使用以下代码来连接 Socket.io 服务器:
const socket = io('http://localhost:3000');这段代码创建了一个 Socket.io 客户端,并连接到指定的 Socket.io 服务器。在连接建立后,我们可以使用 socket.emit(...) 方法向服务器发送消息,使用 socket.on(...) 方法监听服务器发送的消息。
socket.emit('chat message', 'Hello, world!');
socket.on('chat message', (msg) => {
console.log('received message:', msg);
});这段代码向服务器发送了一条名为 chat message 的消息,并在服务器发送该消息后,输出了该消息。
Socket.io 的高级用法
房间
Socket.io 支持将连接分组到房间中,以便在房间内进行广播。可以使用以下代码将连接加入房间:
socket.join('room1');可以使用以下代码将连接从房间中移除:
socket.leave('room1');可以使用以下代码向房间内的所有连接广播消息:
io.to('room1').emit('chat message', 'Hello, room1!');命名空间
Socket.io 支持将连接分组到命名空间中,以便在命名空间内进行广播。可以使用以下代码创建命名空间:
const nsp = io.of('/my-namespace');可以使用以下代码将连接加入命名空间:
socket.join('/my-namespace');可以使用以下代码将连接从命名空间中移除:
socket.leave('/my-namespace');可以使用以下代码向命名空间内的所有连接广播消息:
nsp.emit('chat message', 'Hello, my namespace!');示例代码
以下是一个简单的聊天室应用程序,使用了 Socket.io 来实现实时通信:
服务器端代码
// www.javascriptcn.com code example
const http = require('http');
const server = http.createServer();
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('chat message', (msg) => {
console.log('received message:', msg);
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});客户端代码
// www.javascriptcn.com code example
<!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 id="input-message" type="text">
<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('input-message');
messageForm.addEventListener('submit', (event) => {
event.preventDefault();
const message = messageInput.value;
socket.emit('chat message', message);
messageInput.value = '';
});
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
messages.appendChild(li);
});
</script>
</body>
</html>在浏览器中打开该 HTML 文件,即可使用该聊天室应用程序。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67d15b64a941bf71342e3bd6