给我演示一个websocket聊天代码
时间: 2023-11-21 07:00:28 浏览: 78
Java Socket 聊天通信演示代码
好的,以下是一个简单的 WebSocket 聊天的示例代码:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>WebSocket 聊天室</title>
</head>
<body>
<div id="chat"></div>
<form id="chat-form">
<input type="text" id="chat-input" placeholder="输入消息">
<button type="submit">发送</button>
</form>
<script>
const chat = document.getElementById('chat');
const form = document.getElementById('chat-form');
const input = document.getElementById('chat-input');
// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:3000');
// 监听消息
socket.onmessage = (event) => {
const message = event.data;
const p = document.createElement('p');
p.innerText = message;
chat.appendChild(p);
};
// 监听表单提交事件
form.addEventListener('submit', (event) => {
event.preventDefault();
const message = input.value;
socket.send(message);
input.value = '';
});
</script>
</body>
</html>
```
Node.js 服务器代码:
```javascript
const WebSocket = require('ws');
// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 3000 });
// 监听连接事件
wss.on('connection', (ws) => {
console.log('客户端已连接');
// 监听消息事件
ws.on('message', (message) => {
console.log(`接收到消息:${message}`);
// 广播消息给所有客户端
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
```
这段代码创建了一个 WebSocket 服务器,当客户端连接时,服务器会将消息广播给所有客户端。在客户端,创建了一个 WebSocket 连接,当表单提交时,将消息发送给服务器。服务器收到消息后,会广播给所有客户端。
阅读全文