WebSocket实现简单客服聊天系统


Posted in Javascript onMay 12, 2017

一 需求

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

二 思路

使用 Node.js 搭建服务器,安装 websocket 模块、node-uuid模块。通过在客服端和用户端传递 客服ID 和 用户ID 来进行消息的传送。

三 具体实现

3.1 搭建 Node 服务器

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

3.2 安装 ws 模块、node-uuid 模块

npm install ws
npm install ws

3.3 创建 server.js

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

const WebSocket = require('ws');
onst wss = new WebSocket.Server({ port: 8906 });
const uuid = require('node-uuid');
// 省略一些参数的定义
// 服务端处理连接
wss.on('connection', function(ws) {
  console.log('client [%s] connected', clientIndex);
  var connection_uuid = uuid.v4();
  var nickname = "AnonymousUser" + clientIndex;
  clientIndex += 1;
  clients.push({ "id": connection_uuid, "ws": ws, "nickname": nickname });
  
 //服务器收到消息时
  ws.on('message', function(e) {
   var data = JSON.parse(e);
   var type = data.type;
   // 省略业务处理逻辑
  });

  // ws连接关闭时触发的操作
  ws.on("close", function () {
   websocketClose();
  });
  
  // 省略函数 websocketClose()、wsSend()、socketClose 的定义
  // 聊天服务器关闭所触发的操作
  process.on("SIGINT", function () {
   console.log("SOCKET CLOSED!");
   ("客服已关闭,请稍后再来");
   process.exit();
  });
});

3.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.5 创建 customerService.html

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 #Javascript
详解微信小程序 相对定位和绝对定位
May 11 #Javascript
Vue通过input筛选数据
Oct 26 #Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 #Javascript
jQuery遮罩层实例讲解
May 11 #jQuery
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 #Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 #Javascript
You might like
乐信RP2100的电路分析和打磨
2021/03/02 无线电
phpMyadmin 用户权限中英对照
2010/04/02 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
python记录程序运行时间的三种方法
2017/07/14 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python发展史及网络爬虫
2019/06/19 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
单位领导证婚词
2014/01/14 职场文书
中考冲刺决心书
2014/03/11 职场文书
村级换届选举方案
2014/05/10 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
导游词之临安白水涧
2019/11/05 职场文书
话题作文之呼唤
2019/12/18 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL