WebSocket实现简单客服聊天系统

下面是“WebSocket实现简单客服聊天系统”的攻略：

一、什么是WebSocket

WebSocket 具有双向通信的能力，它能够在浏览器与服务器之间创建持久性的连接，实现实时通信，比如聊天室、在线游戏等。

二、实现 WebSocket 客服聊天系统的原理

客服聊天系统的流程如下：

客户端发送连接请求给服务器，建立 WebSocket 连接
服务器对连接请求进行处理，建立连接
客户端和服务器通过该连接进行通信
服务器将消息发送给对应客户端

在实现 WebSocket 客服聊天系统的过程中，我们需要掌握如下内容：

HTML5 WebSocket API
WebSocket 服务器实现

三、使用 HTML5 WebSocket API

1. 创建 WebSocket 对象

var ws = new WebSocket("ws://localhost:8080");

2. WebSocket 对象的事件

WebSocket 对象定义了一些事件来处理从 WebSocket 服务器传来的响应。

onopen：连接建立后调用
onmessage：接收到服务器发送的消息时调用
onerror：通信发生错误时调用
onclose：连接关闭时调用

下面是一个示例：

var ws = new WebSocket("ws://localhost:8080");

ws.onopen = function() {
  console.log("WebSocket 已连接。");
};

ws.onmessage = function(evt) {
  console.log("接收到消息：", evt.data);
};

ws.onerror = function(evt) {
  console.log("WebSocket 发生错误：", evt);
};

ws.onclose = function() {
  console.log("WebSocket 连接已关闭。");
};

3. 发送消息

ws.send("Hello Server");

四、实现 WebSocket 服务器

可以使用 Node.js 和 Socket.IO 来实现 WebSocket 服务器。

1. 安装 Node.js

下载 Node.js 并安装，官网：https://nodejs.org/

2. 安装 Socket.IO

创建项目目录，进入该目录，使用命令行安装 Socket.IO：

npm install socket.io

3. 创建 WebSocket 服务器

在项目目录中，创建 server.js 文件，输入如下代码：

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');

app.listen(8080);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.on('connection', function (socket) {
  console.log('a user connected');

  socket.on('message', function (msg) {
    console.log('收到消息: ' + msg);

    io.emit('message', msg);
  });

  socket.on('disconnect', function () {
    console.log('用户断开连接');
  });
});

在项目目录中，创建 index.html 文件，输入如下代码：

<!doctype html>
<html>
  <head>
    <title>WebSocket 客服聊天系统</title>
  </head>
  <body>
    <h1>WebSocket 客服聊天系统</h1>
    <div>
      <textarea id="message" rows="10" cols="40"></textarea>
      <button id="send">发送</button>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
      var messageEl = document.getElementById('message');
      var sendBtn = document.getElementById('send');

      socket.on('message', function (msg) {
        messageEl.value += '收到消息：' + msg + '\n';
      });

      sendBtn.onclick = function () {
        var message = messageEl.value.trim();
        if (message) {
          socket.emit('message', message);
          messageEl.value = '';
        }
      };
    </script>
  </body>
</html>

4. 启动 WebSocket 服务器

在命令行中输入：

node server.js

五、WebSocket 客服聊天系统的实现

客户端和服务器都创建成功后，我们就可以建立 WebSocket 连接了，也就是在客户端中调用如下代码：

var ws = new WebSocket("ws://localhost:8080");

然后在页面中添加输入框和发送按钮，发送按钮的 onclick 事件中向服务器发送消息，如下：

<div>
  <textarea id="message" rows="10" cols="40"></textarea>
  <button id="send">发送</button>
</div>
<script>
  var ws = new WebSocket("ws://localhost:8080");
  var messageEl = document.getElementById('message');
  var sendBtn = document.getElementById('send');

  ws.onopen = function() {
    console.log("WebSocket 已连接。");
  };

  ws.onmessage = function(evt) {
    console.log("接收到消息：", evt.data);
  };

  ws.onerror = function(evt) {
    console.log("WebSocket 发生错误：", evt);
  };

  ws.onclose = function() {
    console.log("WebSocket 连接已关闭。");
  };

  sendBtn.onclick = function() {
    ws.send(messageEl.value);
    messageEl.value = '';
  };
</script>

在服务器端接收客户端发送的消息，并将消息发送给其他客户端，代码如下：

io.on('connection', function (socket) {
  console.log('a user connected');

  socket.on('message', function (msg) {
    console.log('收到消息: ' + msg);

    io.emit('message', msg);
  });

  socket.on('disconnect', function () {
    console.log('用户断开连接');
  });
});

六、示例说明

1. 发送消息

假设我们有两个用户，分别是张三和李四。张三在输入框中输入了一条消息“你好，李四”，然后点击了发送按钮。这条消息将会发送给 WebSocket 服务器，服务器将该消息发送给其他客户端（这里是李四）。李四的页面上就会出现一条消息“收到消息：你好，李四”。

2. 断开连接

如果客户端断开了 WebSocket 连接，那么服务器会收到一个 disconnect 事件。然后服务器就可以将该客户端从在线列表中移除。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：WebSocket实现简单客服聊天系统 - Python技术站