之前说了websocket的服务端编写，下面说说客户端的编写，若要看服务端可以查看链接：https://blog.csdn.net/jared_he2017/article/details/79886131
1. 首先通过服务端提供的websocket连接地址进行初始化websocket
var websocket; //全局的
function initSocket(){
if(!websocket){
if('WebSocket' in window) {
websocket = new WebSocket("ws://" + ctx + "/websocket");
} else if('MozWebSocket' in window) {
websocket = new MozWebSocket("ws://" + ctx + "/websocket");
} else {
websocket = new SockJS("http://" + ctx + "/sockjs/websocket");
}
}
}
2. 然后为websocket连接定义各种事件方法
$(function() {
initSocket();
websocket.onopen = function(evnt) {
console.log(" websocket.onopen ");
};
websocket.onmessage = function(evnt) {
// var base64 = base64Encode(evnt.data);
// $("#msg").append("<p><img src='data:image/png;base64," + evnt.data + "' /></p>");
var msgObj = eval("(" + evnt.data + ")");
setMsg(msgObj);
console.log(" websocket.onmessage ");
};
websocket.onerror = function(evnt) {
console.log(" websocket.onerror ");
};
websocket.onclose = function(evnt) {
console.log(" websocket.onclose ");
initSocket();
};
});
3. 如果你的服务段是通过nginx进行反代理，那么要定时发送心跳包来保持连接，具体时间只有比nginx与tomcat的最大保持连接时长小就行，我的配置为60s，当然ie和edge浏览器会自动发送心跳包
function sendHeartData(){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Ch
if(isIE || isEdge) //ie、edge浏览器会自动发送心跳包，无需手动发送
return;
if(websocket && websocket.readyState && websocket.readyState == 1) {
websocket.send("java.nio.HeapByteBuffer");
}
}
var heartData = setInterval(sendHeartData, 60000); // 每分钟发送一次心跳包