一个websocket 可以多个页面创建吗_nodejs实现一个简单的WebSocket聊天室
时间: 2023-11-22 14:54:40 浏览: 100
是的,一个 WebSocket 可以被多个页面使用。下面是一个简单的 Node.js 实现 WebSocket 聊天室的示例代码:
```javascript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('A new client connected');
ws.on('message', function incoming(message) {
console.log('Received message:', message);
// Broadcast the message to all clients
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', function close() {
console.log('Client disconnected');
});
});
```
这个聊天室会监听端口 8080,并且当有新的客户端连接时,会打印一条消息。当客户端发送消息时,服务器会将消息广播给所有连接的客户端。当客户端关闭连接时,也会打印一条消息。
在客户端,你可以使用 WebSocket API 来连接到服务器并发送和接收消息。下面是一个简单的 HTML 页面,它使用 JavaScript 来实现客户端逻辑:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>WebSocket Chat</title>
</head>
<body>
<h1>WebSocket Chat</h1>
<input type="text" id="message" />
<button onclick="sendMessage()">Send</button>
<ul id="messages"></ul>
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('message', function(event) {
const messages = document.getElementById('messages');
const li = document.createElement('li');
li.innerText = event.data;
messages.appendChild(li);
});
function sendMessage() {
const message = document.getElementById('message').value;
socket.send(message);
}
</script>
</body>
</html>
```
这个页面包含一个文本框和一个按钮,用于发送消息。它还包含一个列表,用于显示所有收到的消息。当收到来自服务器的消息时,它会将消息添加到列表中。当用户点击按钮时,它会将文本框中的内容发送到服务器。在这个示例中,我们假设服务器运行在本地主机上,端口号为 8080。如果你将这个代码保存为 chat.html 并在本地主机上运行,你应该能够在多个浏览器标签中打开它,并在它们之间发送消息。
阅读全文