一 需求

一个多商家的电商系统,比如京东商城,不同商家之间的客服是不同的,所面对的用户也是不同的。要实现一个这样的客服聊天系统,那该系统就必须是一个支持多客服、客服一对多用户的聊天系统。

二 思路

使用 Node.js 搭建服务器,全局安装 ws 模块、node-uuid模块。通过 Nodejs 服务处理客服端和用户端传递过来的 客服ID 和 用户ID,来实现消息的精准传送。

三 具体实现

下面主要谈谈客服聊天系统涉及 Nodejs 的方面。至于客服聊天系统的 PHP、MySQL 方面,主要是用来存储和获取聊天记录的,在此就省略了。

3.1 搭建 Node 服务器

3.1.1 Nodejs 的安装

参考本人前面的文章 《Centos6.8 下 Node.js 的安装》。

3.1.2 全局安装 ws 模块、node-uuid 模块(使用国内淘宝镜像)

npm --registry=https://registry.npm.taobao.org install -g ws
npm --registry=https://registry.npm.taobao.org install -g node-uuid

3.1.3 创建 kefu.js

在项目里面新建一个 kefu.js,创建服务,指定8906端口(下面是主要代码,仅供参考):

 1 const WebSocket = require('ws');
2 const wss = new WebSocket.Server({ port: 8906 });
3 const uuid = require('node-uuid');
4 // 省略一些参数的定义
5 // 服务端处理连接
6 wss.on('connection', function(ws) {
7 console.log('client [%s] connected', clientIndex);
8 var connection_uuid = uuid.v4();
9 var nickname = "AnonymousUser" + clientIndex;
10 clientIndex += 1;
11 clients.push({ "id": connection_uuid, "ws": ws, "nickname": nickname });
12
13 //服务器收到消息时
14 ws.on('message', function(e) {
15 var data = JSON.parse(e);
16 var type = data.type;
17 // 省略业务处理逻辑
18 });
19
20 // ws连接关闭时触发的操作
21 ws.on("close", function () {
22 websocketClose();
23 });
24
25 // 省略函数 websocketClose()、wsSend()、socketClose 的定义
26 // 聊天服务器关闭所触发的操作
27 process.on("SIGINT", function () {
28 console.log("SOCKET CLOSED!");
29 ("客服已关闭,请稍后再来");
30 process.exit();
31 });
32 });

3.1.4 创建 customer.html

该页面是用户页面。在页面上建立一个WebSocket的连接,并实现向服务器端发送消息(下面是主要代码,仅供参考):

 <script>
//建立连接
const ws = new WebSocket("ws://22.33.66.88:8906");
var client_id = ''; //ws连接打开后的操作
ws.onopen = function (e) {
//向服务器发送该ws连接的用户信息
}; //收到消息处理
ws.onmessage = function (e) {
// 省略
}; //ws连接出错所触发的操作
ws.onerror = function (e) {
// 省略
}; //ws连接关闭时所触发的操作
ws.onclose = function (e) {
// 省略
}; // 省略函数 appendLog()、sendMessage()、sendMessage2()、wsSendMessage() 的定义
</script>

3.1.5 创建 customerService.html

该页面是客服页面,类似于 customer.html,代码方面可参考 customer.html

至此,通过在Linux终端运行以下命令即可开启客服聊天服务:

node kefu.js

若在浏览器无法打开客服页面(比如customer.html),则可能需要将Linux系统的8906端口开启。

通过命令 node kefu.js 这种开启客服聊天服务的方式仅限于当前终端会话,若关闭当前终端会话则无法提供服务了。因此,还要做到让客服聊天服务在后台持续稳定地运行。

3.2 让客服聊天服务在后台持续稳定地运行

使用 pm2 这个 Nodejs 部署和进程管理工具可以实现这一目的。

3.2.1 全局安装 pm2 工具:

npm --registry=https://registry.npm.taobao.org install -g pm2

3.2.2 开启客服聊天服务:

pm2 start kefu.js

3.3 实现外网通过80端口访问 kefu.js(这一步非必需)

使用 Nginx 反向代理可以实现这一目的。

在 Nginx 配置目录下新建一个 kefu.test.com.conf 文件,配置如下:

upstream kefu.test.com {
server 127.0.0.1:;
}
server {
listen ;
server_name kefu.test.com;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true; proxy_pass http://kefu.test.com;
proxy_redirect off;
}
}

用 WebSocket 实现一个简单的客服聊天系统的更多相关文章

  1. 基于SpringBoot+WebSocket搭建一个简单的多人聊天系统

    前言   今天闲来无事,就来了解一下WebSocket协议.来简单了解一下吧. WebSocket是什么   首先了解一下WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工 ...

  2. 用socket.io实现websocket的一个简单例子

    socket.io 是基于 webSocket 构建的跨浏览器的实时应用. 逛博客发现几个比较好的 一.用socket.io实现websocket的一个简单例子 http://biyeah.iteye ...

  3. 通过WebSocket实现一个简单的聊天室功能

    WebSocket WebSocket是一个协议,它是是基于TCP的一种新的网络协议,TCP协议是一种持续性的协议,和HTTP不同的是,它可以在服务器端主动向客户端推送消息.通过这个协议,可以在建立一 ...

  4. Comet反向ajax技术实现客服聊天系统

    说明:Comet反向Ajax是在看了燕十八老师的视频以后,结合他讲解的例子,自己用ajax+java实现了一遍.在这里把代码贴出来,以供大家学习.同时,ajax轮询技术也可以用在消息推送的功能中,下次 ...

  5. 如何用WebSocket实现一个简单的聊天室以及单聊功能

    百度百科中这样定义WebSocket:WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端.简单的说,We ...

  6. 学习WebSocket(二):使用Spring WebSocket做一个简单聊天室

    聊天室高频率.低延时完全符合websocket的特点,所以聊天室使用websocket再适合不过了. 聊天室的功能并没有比上一节代码多多少,主要在握手阶段对用户的session做处理,对用户的消息进行 ...

  7. 后端Python3+Flask结合Socket.io配合前端Vue2.0实现简单全双工在线客服系统

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_158 在之前的一篇文章中:为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统,详 ...

  8. WebSocket介绍和一个简单的聊天室

    WebSocket是什么呢? WebSocket一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并被RFC7936所补充规范, ...

  9. Django 学习笔记之六 建立一个简单的博客应用程序

    最近在学习django时建立了一个简单的博客应用程序,现在把简单的步骤说一下.本人的用的版本是python 2.7.3和django 1.10.3,Windows10系统 1.首先通过命令建立项目和a ...

随机推荐

  1. poj 2940

    Wine Trading in Gergovia Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3187   Accepte ...

  2. 一个应用 可以有多个application

    韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com 一个应用里面怎样才能有2个application 一个AndroidManifest.xml中可 ...

  3. JZYZOJ1349 SPOJ839 星屑幻想 xor 网络流 最大流

    http://172.20.6.3/Problem_Show.asp?id=1349 调了两个小时发现数组开小了[doge].题意:给出几个点,有的点的权值确定,连接两点的边的权值为两点值的异或和,求 ...

  4. 【推导】【贪心】XVII Open Cup named after E.V. Pankratiev Stage 4: Grand Prix of SPb, Sunday, Octorber 9, 2016 Problem H. Path or Coloring

    题意:给你一张简单无向图(但可能不连通),再给你一个K,让你求解任意一个问题:K染色或者输出一条K长路径. 直接贪心染色,对一个点染上其相邻的点的颜色集合之中,未出现过的最小的颜色. 如果染成就染成了 ...

  5. 【Splay】bzoj3224 Tyvj 1728 普通平衡树

    #include<cstdio> #include<iostream> #include<cstring> #include<algorithm> us ...

  6. 20172333 2017-2018-2 《Java程序设计》第4周学习总结

    20172333 2017-2018-2 <Java程序设计>第4周学习总结 教材学习内容 1.类结构的定义与概念 2.利用实例数据建立对象状态的概念 3.描述可见性修饰符作用在方法和数据 ...

  7. WPF中的动画——(六)演示图板

    前面所介绍的都是单一的动画,它只能修改单一属性.有的时候,我们需要将一组动画一起进行,对于一个按钮,我们可能有如下需求: 选择该按钮时,该按钮增大并更改颜色. 单击该按钮时,该按钮缩小并恢复其原始大小 ...

  8. winform WebBrowser如何修改使用默认的IE浏览器版本

    在搜了一些相关资料原来WebBrowser使用的是IE的兼容模式进行浏览(IE7模式). 建议:先添加注册表中,然后使用注册表编辑器导出功能,产生reg注册文件:方便日后使用. Winform  We ...

  9. Vue实例详解与生命周期

    http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...

  10. Nand Flash与Nor

    转:http://www.360doc.com/content/11/1215/15/1299815_172458274.shtml Flash经常在一些地方被提到,一直没认真去理解它们的区别,因此, ...