SpringBoot结合WebSocket开发实时消息推送（二）

「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」

1、前言

在上一篇的分享中，我为大家介绍了WebSocket的基本知识。下面就为大家介绍下，具体的开发应用。

2、前端代码

/**
 * 初始化websocket
 */
var fxPostion = function(callback){
	socket = Util.createSocket({
		serviceCode:"fxPositionRTM",
        mqQuotaName:'fxPQChangeQueue',
        openCallBack: callback,
        onmessage:function (msg) {
            console.info("收到消息："+msg);
            //...do something
        }
	});
};

/**
 * 当查询条件改变时，需要将查询条件传给后端，改变推送数据
 */
var changeQueryParam = function(params){
	if (!socket){
		fxPostion(function () {
            //向服务器发送数据
			socket.send(Util.webSocketSendHandler(params));
		});
	} else {
		socket.send(Util.webSocketSendHandler(params));
	}
};

//这里，因为项目里WebSocket时结合MQ使用的，所以对WebSocket的基础方法也做了一个简单的工具类，方便后续的使用。这里也为大家分享下：
var sockets = [];

Util.createSocket = function (params) {
    //检查浏览器是否支持websocket对象
    if (!"WebSocket" in window){
        console.error("该浏览器不支持WebSocket!");
        return false;
    }
    //检查唯一标示service_code是否存在(区分不同的服务)
    if (!params || !params.serviceCode){
        Util.logerror("websocket连接必须带有唯一标识！")
        return false;
    }
    var ws_path = Cloud.websocketUrl + "/websocket?serviceCode="+params.serviceCode;
    if(params.sysUserLoginname){
    	ws_path += '&sys_user_loginname=' + params.sysUserLoginname;
    }
    if(params.mqQuotaName){
    	ws_path += '&mqQuotaName=' + params.mqQuotaName;
    }
    if(params.mqExchangeName){
    	ws_path += '&mqExchangeName=' + params.mqExchangeName;
    }
    if(params.mqRoutingKeyName && params.mqExchangeName){
    	ws_path += '&mqRoutingKeyName=' + params.mqRoutingKeyName;
    }
    console.log("websocket请求地址："+ws_path);
    //创建WebSocket对象，通过将消息发送到不同的MQ队列，与之建立连接。这样WebSocket中的前后端消息交互就放到了MQ上
    var $websocket = new WebSocket(ws_path);
    //这里的onopen指的是WebSocket实例对象的onopen属性，用来定义连接成功后的回调函数。（PS：如果有多个回调函数，可以使用addEventListener方法）
    $websocket.onopen = function () {
        if (params.onopen && typeof params.onopen==="function"){
            params.onopen();
        }
        console.log("websocket连接成功!");
        sockets.push($websocket);
        if(params.openCallBack){
            params.openCallBack();
        }
    };
    $websocket.onerror = function () {
        if (params.onerror && typeof params.onerror==="function"){
            params.onerror();
        }
        console.error("websocket连接异常!");
    };
    $websocket.onclose = function () {
        if (params.onclose && typeof params.onclose ==="function"){
            params.onclose();
        }
        console.log("websocket已关闭!");
    };
    //用来定义收到服务器数据后的回调函数。（PS：这的数据也可能是二进制数据，比如Blob对象）
    $websocket.onmessage = function (ev) {
        var message = ev.data;
        if (params.onmessage && typeof params.onmessage === "function"){
            params.onmessage(message);
        }else{
            console.log("onmessage:"+message);
        }
    };
    return $websocket;
};

window.onbeforeunload = function (ev) {
    for (var i=0;i<K_sockets.length;i++){
        if (sockets[i] && sockets[i] instanceof WebSocket){
            sockets[i].close();
        }
    }
};

/**
 * webSocket消息处理器
 */
Util.webSocketSendHandler = function(params){
	if(typeof params === 'string'){
		return params;
	}
	return JSON.stringify(params);
};

​ 好了、本期就先介绍到这里，有什么需要交流的，大家可以随时私信我。😊