哈希空间

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 阅读 1326

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

Hello！需要输入验证码

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