Websocket 知识点

基于单个 TCP 连接上进行全双工通讯的协议。

参考：websockect

为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

1.允许服务端主动向客户端推送数据。

2.浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

3.获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

readyState

状态值	描述
0	表示连接尚未建立
1	表示连接已建立，可以进行通信
2	表示连接正在进行关闭
3	表示连接已经关闭或者连接不能打开

事件

事件	处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

方法

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

socket.io

是一个websocket库，包含客户端和服务端。其屏蔽了所有底层细节，让顶层调用接口统一。

会自动根据浏览器从Websocket、Adobe Flash Socket、Ajax 长轮询、Ajax multipart streaming 、持久 Iframe、JSONP 轮询等等各种方式中选择最佳的方式来实现网络实时应用。

相关概念

客户端、服务端、自定义事件、事件触发、事件监听、中间件、cors 跨域、命名空间、socket id、分组、广播、一对一、一对多、多对多、多对一、服务断开、服务重连、nginx 配置多节点、debug

在线客服方案

需求：

1. 前端引入一串JS代码，生成对话框。客户 -> 服务端 <- 客服
2. 客户和客服输入状态即时显示
3. 聊天记录查看，导出
4. 客户消息队列，进入排队等候中、客服选择接入（或者自动分配客服）
5. 新客户咨询提醒
6. 客户身份唯一状态保持
7. 客服一对多提供服务
8. 切换客服状态、客服人员
9. 常用语需要快捷发送
10. 客户信息一键录入ERP
11. 客户地区、终端等来源信息分析
12. 消息发送时间、客户离线通知
13. 展示上一次访问记录
14. 黑名单、满意度评价
15. 关键字转特殊分组
16. 客户分组
17. 客户咨询邮件通知
18. 访客信息、访客数、对话数、已完成对话、平均在线时长、好评数、成交数、黑名单数、客服人数

方案：

1.JS生成Iframe 标签，初始化通信 URL

访客信息：

• navigator.appName：浏览器名称；
• navigator.appVersion：浏览器版本；
• navigator.language：浏览器设置的语言；
• navigator.platform：操作系统类型；
• navigator.userAgent：浏览器设定的User-Agent字符串。
• document.referrer: 获取来源URL
• doucment.URL: 获取当前URL

访客所在国家：中国

访客所在省份：四川省

访客所在城市：成都市

访客使用搜索引擎：baidu

访客搜索关键字：一洽客服系统

访客点击类型：SEO

引入百度统计