写了一个关于工程的项目,关于工地数据的实时监控
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(); }
这样写就可以拿到数据,当然要看后台多少时间给你推送数据,这样页面上的数据就可以实时更新了。
大概的内容就是这些,如有不足欢迎补充!