什么是 Socket.io
Socket.io 是一个基于 WebSockets 的 JavaScript 库，它可用于实现实时应用程序。它非常灵活且易于使用。它支持跨浏览器的实时通信，并简化了在客户端和服务器端之间建立连接的过程。Socket.io 是一个开源库，可以与各种 Web 框架共同使用。
使用 Socket.io 实现聊天室应用
在本文中，我们将使用 Express 和 Socket.io 创建一个简单的聊天室应用。该应用程序将允许用户在实时聊天室中发送消息。
安装 Socket.io 和 Express
首先，我们需要安装两个库：Socket.io 和 Express。您可以使用以下命令安装它们：
npm install socket.io npm install express
创建服务器
在我们编写任何代码之前，我们需要创建服务器。我们将使用 Express 框架创建服务器。以下是要执行的步骤：
创建一个
index.js文件。从
express库导入express构造函数。
const express = require('express');
const app = express();- 使用
listen方法将应用程序绑定到指定的端口。
const port = 3000;
app.listen(port, () => {
console.log(`Server is listening on port ${port}`);
});现在，我们已经创建了一个基本的 Express 服务器。
设置 Socket.io
现在，我们将添加 Socket.io 到我们的应用程序。以下是要执行的步骤：
- 导入
socket.io并将其挂载到服务器的实例上。
const http = require('http').Server(app);
const io = require('socket.io')(http);- 使用
io.on方法来处理来自客户端的连接事件。
io.on('connection', (socket) => {
console.log('a user connected');
});现在，当有新客户端连接到服务器时，控制台将输出 “a user connected”。
向客户端发送消息
现在，让我们添加一些逻辑，以便客户端能够向服务器发送消息。
- 在服务器上加入以下代码块以监听客户端的消息。
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
});- 在客户端上加入以下代码块以向服务器发送消息。
$('form').submit(function(e) {
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});这将允许客户端发送消息并在服务器的控制台上打印消息。
- 现在，让我们将这条消息发送回每个连接的客户端。我们可以使用
io.emit方法来实现。
io.emit('chat message', msg);更新后的代码如下所示：
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
io.emit('chat message', msg);
});
});现在，每个客户端都将收到其他客户端发送的消息。
完整代码示例
下面是服务器端和客户端代码的完整示例：
- 服务器端代码（
index.js）：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = 3000;
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
io.emit('chat message', msg);
});
});
http.listen(port, () => {
console.log(`Server is listening on port ${port}`);
});- 客户端 HTML 文件（
index.html）：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<script src="https://cdn.socket.io/socket.io-3.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
const socket = io();
$('form').submit(function(e) {
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg) {
$('#messages').append($('<li>').text(msg));
});
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>总结
在本文中，我们学习了如何使用 Socket.io 和 Express 框架构建基于 WebSockets 的实时聊天应用程序。我们看到了如何在服务器端设置 Socket.io，并演示了如何处理来自客户端的连接、消息和断开连接事件。我们还展示了如何使用 io.emit 将消息发送回所有已连接的客户端。
Socket.io 是一个非常有用的库，可用于实现各种实时应用程序。希望这篇文章能够帮助你更好地理解 Socket.io，让你以后能够更轻松地使用它来构建实时应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652b445a7d4982a6ebd417bb