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入门教程(9) Document文档对象
Jan 31 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
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
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
功能强大的php文件上传类
2016/08/29 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
go语言计算两个时间的时间差方法
2015/03/13 Python
Python内建模块struct实例详解
2018/02/02 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
Python实现微信好友的数据分析
2019/12/16 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
哪些是python中web开发框架
2020/06/17 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
师范生自荐信模板
2014/05/28 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
教师个人学习总结
2015/02/11 职场文书
2016新年慰问信范文
2015/03/25 职场文书
手机销售员岗位职责
2015/04/11 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书