哈希空间

js html csss 实现 websocket 的客服功能 在线聊天

WebSocket 是一种在单个 TCP 连接上进行全双工通信的网络协议,可以用于实现实时通信、即时消息、在线聊天等功能。下面是一个使用 JavaScript、HTML、CSS 实现 WebSocket 客服功能的简单示例:

  1. 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 对象并连接到了服务器,然后监听了 openmessage 事件。在用户输入消息后,我们将消息发送到服务器,并将消息显示在聊天框中。

  1. 服务器部分
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 服务器,并监听了 connectionmessage 事件。在收到客户端发送的消息后,我们将该消息发送给所有连接到服务器的客户端。

本文 最佳观看地址:https://www.hashspace.cn/js-websocket-service-chat.html 阅读 1305

打开 哈希空间 微信小程序中查看更佳