最近接触到 websocket，由于之前并没有使用过，所以网上百度一番，最后还是看了一遍 websocket的介绍
上面文章原理上的都说的很明白，所以我就提取出我自己要用的小 demo 来，下面分别是属性，事件，方法的介绍，为了方便查看故将上面介绍中的顺便拿过来。
属性
readyState (只读属性 readyState 表示连接状态)
0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。
事件
Socket.onopen 连接建立时触发
Socket.onmessage 客户端接收服务端数据时触发
Socket.onerror 通信发生错误时触发
Socket.onclose 连接关闭时触发
方法
Socket.send() 使用连接发送数据
Socket.close() 关闭连接
这样我们就可以一边看着下面代码，也可以看着这些方法事件等来修改 demo。
var wsvar url = "ws://xxxx"function WebSocketTest() { ?if ("WebSocket" in window) { ???// 打开一个 web socket ???ws = new WebSocket(url); ???ws.onopen = function() { ?????// 根据后台要求拼接好对应的 json 数据(不一定是 json, 看后台规定) ?????var json={ ??? "test": "test" ?????} ?????console.log(‘WebSocket 第‘ + n + ‘次请求‘) ?????// Web Socket 已连接上，使用 send() 方法发送数据 ?????ws.send(JSON.stringify(json)); ?????console.log(‘已连接上 WebSocket‘) ?????// 模拟断开 => 可以开启下面代码模拟服务器断开时重新请求连接的效果 ?????// setTimeout(function(){ ?????// ??ws.onclose() ?????// }, 8000) ???}; ???ws.onmessage = function (ev) { ?????var json = ev.data; ?????console.log(‘这里是接收到服务器发送的数据：‘ + json) ???}; ???ws.onclose = function() { ?????// 关闭 websocket ?????console.log("连接已关闭...") ?????// 当监听到 websocket 连接断开时,重新连接 ?????reconnect() ???}; ?} else { ????// 浏览器不支持 WebSocket ????alert("您的浏览器不支持 WebSocket!"); ??}}var timer = null// 重新连接function reconnect () { ?try { ???// 将上一次的定时器清除 ???timer && clearTimeout(timer) ???// 这里将尝试连接 ???WebSocketTest() ?} catch { ???// 当连接失败时延迟3秒后再次重新请求连接 ???timer = setTimeout(function (){ ?????reconnect() ???}, 3000) ?}}// 页面关闭时触发window.onunload = function () { ?if (ws) { ???ws.close() ?}}// 页面刷新时触发window.onbeforeunload = function () { ?if (ws) { ???ws.close() ?}}websocket的实践
原文地址：https://www.cnblogs.com/webBlog-gqs/p/9858501.html