websocket实现一对一聊天详细代码
时间: 2024-12-08 14:13:36 浏览: 3
WebSocket 实现一对一聊天的具体代码会涉及到服务器端(如 Node.js 的 Socket.io 或者 Java 的 Spring WebSocket)和客户端(JavaScript)。这里提供一个简化版的示例:
**服务器端 - 使用 Node.js 和 Socket.io**
首先安装所需的依赖:
```bash
npm install express socket.io
```
创建一个简单的 Express 服务器并初始化 Socket.io:
```javascript
const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIO(server);
io.on('connection', (socket) => {
console.log('New client connected:', socket.id);
// 当接收到新的消息时广播给所有用户
socket.on('chatMessage', (msg) => {
io.emit('newMessage', { user: 'User_' + socket.id, message: msg });
});
// 监听新连接的其他用户,推送他们的消息
socket.on('joinRoom', () => {
io.in(socket.room).emit('roomOccupants', `User_${socket.id} joined`);
});
// 当客户端断开连接时,移除房间
socket.on('disconnect', () => {
io.in(socket.room).emit('userLeft', `User_${socket.id} left`);
});
});
const PORT = process.env.PORT || 8080;
server.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
```
**客户端 - 使用 JavaScript(HTML5 Websocket API 或 jQuery插件)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>WebSocket Chat</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="messages"></div>
<input type="text" id="messageInput" placeholder="Type your message...">
<button onclick="sendMessage()">Send</button>
<script>
$(document).ready(() => {
const socket = new WebSocket("ws://localhost:8080");
socket.addEventListener('open', () => {
socket.send(JSON.stringify({ action: "join", room: "room1" }));
});
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.action === 'newMessage') {
$('#messages').append(`<p>${data.user}: ${data.message}</p>`);
}
};
function sendMessage() {
const inputVal = $('#messageInput').val();
if (inputVal) {
socket.send(JSON.stringify({ action: 'chatMessage', message: inputVal }));
$('#messageInput').val('');
}
}
});
</script>
</body>
</html>
```
这只是一个基础的示例,实际应用中可能需要考虑错误处理、用户认证、消息持久化等更复杂的功能。记住,每个部分都需要在服务器上配置相应的安全性和性能优化。
阅读全文