WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，可以在客户端和服务器之间实现实时通信。Socket.io 是一个基于 WebSocket 的实时应用程序框架，它可以在客户端和服务器之间建立实时通信。在本篇文章中，我们将介绍如何使用 WebSocket 和 Socket.io 实现喊话功能。
WebSocket 基础
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。与 HTTP 相比，WebSocket 允许客户端和服务器之间进行实时通信，而不需要轮询或长轮询。 WebSocket 使用升级头在 HTTP/1.1 或更高版本的请求中进行握手。一旦连接建立，客户端和服务器可以通过发送消息进行通信，这些消息可以是文本或二进制数据。
以下是一个简单的 WebSocket 客户端示例：
// javascriptcn.com 代码示例
const socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('open', () => {
console.log('WebSocket 连接已经建立');
});
socket.addEventListener('message', event => {
console.log(event.data);
});
socket.addEventListener('close', event => {
console.log('WebSocket 连接已经关闭');
});Socket.io 基础
Socket.io 是一个基于 WebSocket 的实时应用程序框架。它提供了一个简单的 API，可以在客户端和服务器之间建立实时通信，支持跨浏览器和跨平台，包括移动设备。
以下是一个简单的 Socket.io 服务器和客户端示例：
// javascriptcn.com 代码示例
// 服务器端
const io = require('socket.io')(http);
io.on('connection', socket => {
console.log('一个 Socket.io 连接已经建立');
socket.on('message', message => {
console.log('接收到消息：', message);
io.emit('message', message);
});
socket.on('disconnect', () => {
console.log('一个 Socket.io 连接已经关闭');
});
});
// 客户端
const socket = io('http://localhost:3000');
socket.on('connect', () => {
console.log('Socket.io 连接已经建立');
});
socket.on('message', message => {
console.log('接收到消息：', message);
});
socket.on('disconnect', () => {
console.log('Socket.io 连接已经关闭');
});
socket.emit('message', '你好，Socket.io');实现喊话功能
接下来，我们将使用 WebSocket 和 Socket.io 实现喊话功能。喊话功能可以使一名用户的消息在聊天室中广播，即给所有当前连接的用户发送一条消息。例如，一个用户发出“大声喊话”请求，这条消息将在聊天室中显示并通知所有在线用户。以下是实现喊话功能的示例代码：
// javascriptcn.com 代码示例
// 服务端
const io = require('socket.io')(http);
io.on('connection', socket => {
console.log('一个 Socket.io 连接已经建立');
socket.on('message', message => {
console.log('接收到消息：', message);
if (message.startsWith('/shout ')) {
const body = message.substr(7);
io.emit('message', `${socket.id} 发出了喊话：${body}`);
} else {
io.emit('message', message);
}
});
socket.on('disconnect', () => {
console.log('一个 Socket.io 连接已经关闭');
});
});
// 客户端
const socket = io('http://localhost:3000');
socket.on('connect', () => {
console.log('Socket.io 连接已经建立');
});
socket.on('message', message => {
console.log('接收到消息：', message);
});
socket.on('disconnect', () => {
console.log('Socket.io 连接已经关闭');
});
document.getElementById('send-button').addEventListener('click', () => {
const message = document.getElementById('message').value;
socket.emit('message', message);
});在上面的代码中，当客户端发送一个以“/shout”开头的消息时，服务器将该消息广播给所有在线用户。否则，服务器将该消息传递给接收方客户端。客户端可以通过点击“发送”按钮发送消息给服务器。
总结
本文介绍了如何使用 WebSocket 和 Socket.io 实现喊话功能。WebSocket 和 Socket.io 是实现实时通信的好工具。实现喊话功能可以让用户的消息广播到聊天室中，从而提高聊天室的交互性。希望本文能够对你理解 WebSocket 和 Socket.io 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658567acd2f5e1655d00c0e9