WebSocket

一、发现WebSocket

论怎么发现有WebSocket这个东西的呢还得说说自己最近在做的一个“前端可视化项目” 。

这个项目后期有个功能是这个亚子

如果一个客户端进行换肤 /全屏切换则所有客户端都要进行切换
后端的数据要和前端实时响应起来

对于这个功能之前用koa2开发的服务器并不能实现这两个功能所以老师引出了WebScoket这个东西像我这种对未知事物感到好奇的新时代女性必定要搞搞清楚到底什么是WebSocket

二、什么是WebSocket

WebSocket（套接字）的目标是通过一个长时链接实现与服务器全双工、双向的通信。——来自红宝书的官方解读

用大白话说就是：WebSocket是一个HTML5新增协议可以实现服务端向客户端传递信息实现浏览器和客户端双工通信并且还弥补了HTTP不支持长连接的特点

创建WebSocket时的流程

未命名文件

Websocket使用自定义协议所以不能URL不能使用http://或者https:// 要变化成ws:// 或wss://

使用自定义协议的优点

客户端与服务之间发送非常少的数据不会对HTTP造成任何负担
使用更小的数据包让WebSocket非常适合带宽和延迟问题比较明显的移动应用
主流浏览器都支持

使用自定义协议的缺点

定义协议的时间比定义 JavaScript API长

三、API

1.创建一个新的WebSocket

// 创建对象并提供链接的URL
let socket = new WebSocket('ws://www.example.com/server.php')

注意：传入的URL必须时绝对路径

同源策略不适用于WebScoket 所以可以打开任意站点的连接

WebSocket和XHR类似有一个readyState属性表示当前状态不过这个值和XHR中相应的值不一样

WebSocket.OPENING(0)：连接正在建立
WebSocket.OPEN(1)：连接已经建立
WebSocket.CLOSEING(2)：连接正在关闭
WebSocket.CLOSE(3)：连接已经关闭

WebSocket对象没有readystatechange事件而是有与上述不同状态下对应的其他的事件

比如：close()方法关闭WebSocket连接

socket.close()

readyState的值从0开始调用了close()方法后 readyState变为2 关闭后变为3

四、发送和接收数据

1.发送数据

使用send()方法向服务器发送数据

let socket = new WebSocket('ws://www.example.com/server.php')
let stringData = 'Hello World'
socket.send(stringData)

2.接收数据

服务器向客户端发送消息时 WebSocket对象上会触发一个message事件

socket.onmessage = (event) => {
  let data = event.data
  // 对数据执行某些操作
}

五、其他事件

WebSocket对象在连接生命周期中有可能触发3个其他事件

open：在连接成功建立时触发
error：在发生错误时触发。连续无法存续
close：在连接关闭时出嘎

注意：WebSocket对象不支持DOM Level 2事件监听器，因此需要使用DOM Level 0风格的事件处理程序来监听这些事件

let socket = new WebSocket('ws://www.example.com/server.php')
socket.onopen = () => {
  console.log('连接成功咯！')
}
socket.onerror = () => {
  console.log('连接失败咯！')
}
socket.onclose = () => {
  console.log('连接关闭咯！')
}

close事件的event对象上有额外属性：

wasClean：布尔值，表示连接是否干净地关闭
code：来自服务器的数值状态码
reason：字符串，包含服务器发来的消息

socket.onclose = (event) => {
  console.log(`as clean ? ${event.wasClean} Code=${event.code} Reason=${event.reason}`)
}

目前只了解了这些方法如果后期有遇到其他的再一一补充～

论没见过的WebSocket