前面在Django中已经用到webSocket技术了，webSocket由服务端和客户端组成。当客户端（浏览器）与服务端（服务器）建立链接之后（持久性的），就可以在两者之间进行双向数据传输（客户端可以发送消息到服务端，服务端也可将消息发送给客户端）。WebSocket扩展了浏览器与服务端的通信功能，允许服务端主动向客户端推送数据。利用WebSocket不仅可以节省服务器资源和带宽，还能够更实现实时通讯。随着HTML5的普及现在大部分浏览器基本上都已经支持WebSocket了，特别是大数据时代的推动websocket更显的尤为重要。

判断浏览器是否支持WebSocket

虽然现在大部分浏览器基本上都已经支持WebSocket了，但还是有部分浏览器并不支持WebSocket功能。所以在使用之前我们还是要对浏览器进行检测，看是否支持WebSocket。我们可以通过判断window对象中是否包含WebSocket对象，但是在有些平台即使浏览器不支持 WebSocket也存在这个属性，所以这里我们再加个验证看看是属性中否存在send方法：window.WebSocket.prototype.send，如果同时满足那么就说明我们的浏览器是支持WebSocket的。

初始化WebSocket

WebSocket 提供了用于创建和管理 WebSocket 连接以及可以通过该连接发送和接收数据的 API，我们可以通过WebSocket(url[, protocols]) 构造函数来构造一个WebSocket 。参数为url为WebSocket链接，protocols 为指定可接受子协议的可选参数，成果则返回一个 WebSocket 对象。WebSocket的链接是以ws或者wss开头的，WSS（Web Socket Secure）是WebSocket的加密版。我们只要把websocket构建写在一个方法中，然后把这个方法放挂载到mounted中调用（WebSocket长链接一般再页面加载的时候就会自动调用，很少会再页面中设置按钮去手动调用，当然页面关闭的时候即可销毁链接）。

readyState属性

WebSocket 提供了2个属性分别是readyState和bufferedAmount，readyState中存储了WebSocket 的链接状态（4种状态），分别通过0、1、2、3来表示连接尚未建立、连接已建立、链接正在关闭和链接已关闭。我们可以通过该属性来判断当前的WebSocket 是否已经建立了链接。

异常：readyState返回0

这里遇到一个问题那就是服务端显示连接成功，但是前端socket.readyState却返回为0。打印了下返回结果，奇葩的发现返回结果中readyState值为0，可展开却发现readyState值为1。第二天还弹出了警告提示：WebSocket connection to 'ws://localhost:1527/sockjs-node/694/xcl5ulim/websocket' failed:WebSocket is closed before the connection is established，网上说是连接socket时需要通过IP获取到对应主机的域名来进行连接，此过程会相当耗时前端有一个超时时间导致无法在规定时间内收到服务端消息而触发超时操作。测试结果并不是因为我可以正常的接受到后台传送过来的数据，所以个人觉得该值不可用！！！

实测效果

这里我在redis客户端直接写入数据外面来观察下Vue控制台是否接收到了数据，我在onmessage事件中将接收到的数据通过console.log打印在控制台。我们可以看到此时我们是完全可以及时的接受到数据库中数据的更新的，但是在websocket对象中我们可以看到readyState的值一直是0。所以建议不要使用属性readyState来判断websocket的链接状态，还不如直接用onerror事件监听错误哦！

bufferedAmount

bufferedAmount 是用来记录待发送的 UTF-8 文本字节数，这个文本是被 send() 放入正在队列中等待传输的文本。一旦队列中的所有数据被发送至网络，则该属性值将被重置为0。但是在发送过程中连接被关闭，则该属性值不会重置为0（一般情况下基本为0，除非遇到大量的数据请求需要列队发送）。

webSocket事件

webSocket提供了几个监听事件，可以帮助我们快速地监听到webSocket的特定事件发生。这几个监听事件分别是open（连接建立时触发，可以在链接成功之后调用send方法来发送信息）、message（客户端接收服务端数据时触发，可以用来处理从后端接收到的数据）、error（通信发生错误时触发，可以用来提示用户链接错误）、close（连接关闭时触发，可以在webSocket断开时关闭webSocket），所以我们在初始化webSocket的时候最好将这几个监听事件也绑定相应的回调函数。当webSocket发生以上任意事件时就会去执行相应的方法，这时候我们只需要在相应的方法中指定处理逻辑即可。

webSocket方法

WebSocket主要提供了send和close两个方法，分别用来向服务器发送数据和关闭WebSocket链接。send我们可以通过任何的按钮来触发消息发送，close则有两个一个是监听到WebSocket断了自动关闭链接，另一种则是页面退出之后手动关闭链接。

总结：

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。同时也避免了利用http服务器不断地发送请求，从而减少带宽的消耗降低运营成本。以上内容是小编给大家分享的【Vue实战094：利用webSocket实现实时通信】。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：

为了方便学习，下面附上本文用到的源码：

send:function(data){
    this.scan_socket.send(data)  // 发送数据
},
close: function () {
    this.scan_socket.close()     // 关闭链接
},