基于WebSockets实现在线聊天平台

最新推荐文章于 2025-03-12 21:26:35 发布

程徐小明

最新推荐文章于 2025-03-12 21:26:35 发布

阅读量469

点赞数 10

文章标签： websocket

本文链接：https://blog.csdn.net/2401_82778412/article/details/136267688

版权

本文详细介绍了如何使用JavaScript在前端创建WebSocket连接，以及如何用Node.js在后端处理WebSocket服务器，实现实时聊天功能。用户可以在浏览器中输入消息并立即广播给所有连接的客户端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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('连接已关闭');

});

});