哈希空间
js html csss 实现 websocket 的客服功能 在线聊天
WebSocket 是一种在单个 TCP 连接上进行全双工通信的网络协议,可以用于实现实时通信、即时消息、在线聊天等功能。下面是一个使用 JavaScript、HTML、CSS 实现 WebSocket 客服功能的简单示例:
- HTML 部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket 客服</title>
<style>
#chat-box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1>WebSocket 客服</h1>
<div id="chat-box"></div>
<form>
<input type="text" id="message-input">
<input type="submit" value="发送">
</form>
<script>
var ws = new WebSocket('ws://localhost:8080');
var chatBox = document.getElementById('chat-box');
var messageInput = document.getElementById('message-input');
ws.onopen = function() {
console.log('WebSocket 已连接');
};
ws.onmessage = function(event) {
var message = event.data;
var p = document.createElement('p');
p.innerText = message;
chatBox.appendChild(p);
};
messageInput.addEventListener('keydown', function(event) {
if (event.keyCode === 13) {
event.preventDefault();
var message = messageInput.value;
messageInput.value = '';
ws.send(message);
var p = document.createElement('p');
p.innerText = '我:' + message;
chatBox.appendChild(p);
}
});
</script>
</body>
</html>
以上代码中,我们创建了一个 WebSocket 对象并连接到了服务器,然后监听了 open
和 message
事件。在用户输入消息后,我们将消息发送到服务器,并将消息显示在聊天框中。
- 服务器部分
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
console.log('WebSocket 服务器已启动');
wss.on('connection', function(ws) {
console.log('WebSocket 已连接');
ws.on('message', function(message) {
console.log('收到消息:', message);
wss.clients.forEach(function(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
以上代码中,我们创建了一个 WebSocket 服务器,并监听了 connection
和 message
事件。在收到客户端发送的消息后,我们将该消息发送给所有连接到服务器的客户端。
本文 最佳观看地址:https://www.hashspace.cn/js-websocket-service-chat.html 阅读 1305