vue项目使用websocket实现数据实时推送

写了一个关于工程的项目，关于工地数据的实时监控 

1.后端要先写好数据，将数据传递给前端

2.在前端页面：

$(function(){ 
　var websocket = null;
   //判断当前浏览器是否支持WebSocket
   if ('WebSocket' in window) {
       websocket = new WebSocket("ws://localhost:9999/guanXiangCamera/websocket"); // 后台给的地址
　　// 这里会传递一些数据，
   }else {
       alert('当前浏览器 Not support websocket')
   }
   //连接发生错误的回调方法
   websocket.onerror = function () {
       setMessageInnerHTML("WebSocket连接发生错误");
   };
   //连接成功建立的回调方法
   websocket.onopen = function () {
       //setMessageInnerHTML("WebSocket连接成功");
   }
   //接收到消息的回调方法
   websocket.onmessage = function (event) {
       setMessageInnerHTML(event.data);
   }
   //连接关闭的回调方法
   websocket.onclose = function () {
       //setMessageInnerHTML("WebSocket连接关闭");
   }
   //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
   window.onbeforeunload = function () {
       //closeWebSocket();
   }
   //将消息显示在网页上
   function setMessageInnerHTML(innerHTML) {
       document.getElementById('message').innerHTML += innerHTML + '<br/>';
   }
   //关闭WebSocket连接
   function closeWebSocket() {
       websocket.close();
   }
   //发送消息
   function send() {
       var message = "测试一下，看能不能发！"
       websocket.send(message);
   }
}

注意：有写要求是一进去就要请求websocket返回数据的，或者是查看时再请求接口返回数据的。其实如果页面只有一个请求还好，你离开页面或者关闭时websocket接口并没有断开，这样是使页面加载数据变慢，造成不好的体验

//关闭WebSocket连接
   function closeWebSocket() { //离开时一定要关闭
       websocket.close();
   }

这样写就可以拿到数据，当然要看后台多少时间给你推送数据，这样页面上的数据就可以实时更新了。

大概的内容就是这些，如有不足欢迎补充！