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 相关文章推荐
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
js闭包实例汇总
Nov 09 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
js中的闭包学习心得
Feb 06 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
jquery实现直播视频弹幕效果
Feb 25 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
mysql 全文搜索 技巧
2007/04/27 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
使用php清除bom示例
2014/03/03 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
koa-router源码学习小结
2018/09/07 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
python数据结构之图的实现方法
2015/07/08 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
flask入门之表单的实现
2018/07/18 Python
Python补齐字符串长度的实例
2018/11/15 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python实现udp传输图片功能
2020/03/20 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
商铺租赁意向书
2014/04/01 职场文书
专家推荐信怎么写
2015/03/25 职场文书
网吧管理制度范本
2015/08/05 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技