帮我写一个用websocket实现的一对一好友聊天项目
时间: 2024-05-01 21:21:14 浏览: 75
好的,以下是一个使用 WebSocket 实现的一对一好友聊天项目的简单示例。这个示例代码使用 Node.js 和 Express 框架。请注意,这只是一个简单的示例代码,你可能需要根据你的实际需求进行修改和扩展。
首先,需要安装以下依赖:
```
npm install express ws
```
然后,创建一个 `server.js` 文件:
```javascript
const express = require('express');
const WebSocket = require('ws');
const app = express();
const port = 3000;
// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 });
// 存储所有已连接的客户端
const clients = new Set();
// 处理 WebSocket 连接
wss.on('connection', (ws) => {
// 将新连接的客户端添加到 clients 集合中
clients.add(ws);
// 当客户端发送消息时,广播消息给其他客户端
ws.on('message', (message) => {
console.log('received: %s', message);
broadcast(message, ws);
});
// 当客户端断开连接时,从 clients 集合中删除
ws.on('close', () => {
clients.delete(ws);
});
});
// 广播消息给所有客户端,除了发送消息的客户端
function broadcast(message, sender) {
clients.forEach((client) => {
if (client !== sender && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
}
// 提供静态文件服务
app.use(express.static('public'));
// 启动服务器
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
```
然后,创建一个 `index.html` 文件,用于客户端:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
</head>
<body>
<h1>WebSocket Chat</h1>
<div id="messages"></div>
<form id="chat-form">
<input type="text" id="message-input" placeholder="Type your message">
<button type="submit">Send</button>
</form>
<script>
const ws = new WebSocket('ws://localhost:8080');
const messages = document.querySelector('#messages');
const chatForm = document.querySelector('#chat-form');
const messageInput = document.querySelector('#message-input');
ws.onopen = (event) => {
console.log('WebSocket connected');
};
ws.onmessage = (event) => {
const message = event.data;
const messageElement = document.createElement('div');
messageElement.textContent = message;
messages.appendChild(messageElement);
};
chatForm.addEventListener('submit', (event) => {
event.preventDefault();
const message = messageInput.value;
ws.send(message);
messageInput.value = '';
});
</script>
</body>
</html>
```
最后,在命令行中运行 `node server.js` 启动服务器,然后在浏览器中打开 `http://localhost:3000`,你应该能看到一个简单的聊天界面。你可以在不同的浏览器窗口中打开该页面,并在其中一个窗口中输入消息,然后在其他窗口中看到该消息。
阅读全文