spring集成websocket js的编写

最新推荐文章于 2023-05-30 15:37:41 发布

jared_he2017

最新推荐文章于 2023-05-30 15:37:41 发布

阅读量211

点赞数

分类专栏： java websocket

本文链接：https://blog.youkuaiyun.com/jared_he2017/article/details/79886600

版权

java 同时被 2 个专栏收录

18 篇文章

订阅专栏

websocket

2 篇文章

订阅专栏

本文介绍了如何在JavaScript中实现Spring WebSocket客户端的集成，包括初始化WebSocket连接，定义连接事件处理，以及在Nginx反代理下发送心跳包以维持连接的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前说了websocket的服务端编写，下面说说客户端的编写，若要看服务端可以查看链接：https://blog.youkuaiyun.com/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); // 每分钟发送一次心跳包