WebSockets允许在客户端和服务器之间建立持久的双向通信通道。下面是一个使用JavaScript和Node.js的示例：
1. 创建一个`index.html`文件，包含以下内容：
<!DOCTYPE html>
<html>
<head>
<title>实时聊天</title>
<style>
#chatbox {
height: 400px;
width: 400px;
border: 1px solid #ccc;
padding: 10px;
overflow-y: scroll;
}
#messageInput {
width: 300px;
}
</style>
</head>
<body>
<div id="chatbox"></div>
<input type="text" id="messageInput" placeholder="输入消息">
<button οnclick="sendMessage()">发送</button>
<script>
// 创建WebSocket连接
var socket = new WebSocket('ws://localhost:8080');
// 当连接建立时触发
socket.onopen = function() {
console.log('连接已建立');
};
// 当收到消息时触发
socket.onmessage = function(event) {
var message = event.data;
var chatbox = document.getElementById('chatbox');
chatbox.innerHTML += '<p>' + message + '</p>';
};
// 当连接关闭时触发
socket.onclose = function() {
console.log('连接已关闭');
};
// 发送消息
function sendMessage() {
var messageInput = document.getElementById('messageInput');
var message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
2. 创建一个Node.js服务器，用于处理WebSocket连接和消息传递。创建一个名为`server.js`的文件，包含以下内容：
const WebSocket = require('ws');
// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });
// 当有新的连接建立时触发
wss.on('connection', function connection(ws) {
console.log('新的连接已建立');
// 当收到消息时触发
ws.on('message', function incoming(message) {
console.log('收到消息:', message);
// 广播消息给所有连接的客户端
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
// 当连接关闭时触发
ws.on('close', function close() {
console.log('连接已关闭');
});
});
3. 打开终端，进入项目目录，运行以下命令安装WebSocket库：
npm install ws
4. 在终端中运行以下命令启动服务器：
node server.js
5. 在浏览器中打开`index.html`文件，你将看到一个聊天界面。你可以在输入框中输入消息并点击发送按钮发送消息，所有连接的客户端都将收到消息并显示在聊天框中。