JS---- websocket 前端测试页面

HTML

<div class="wrapper-content">
    <div class="panel">
        <div class="panel-header">定时任务列表</div>
        <div class="panel-body">
            <div>userId<input id="userId" name="userId" type="text" th:value="${userId}"></div>
            <div>toUserId<input id="toUserId" name="toUserId" type="text" value="2"></div>
            <div>发送消息<input id="sendMsg" name="sendMsg" type="text" value="hello websocket"></div>
            <div>操作开启socket<button onclick="openSocket()">开启 Socket</button></div>
            <div>操作发送消息<button onclick="sendMessage()">发送消息</button></div>
        </div>
    </div>
</div>

JS

var websocket = {};

function openSocket() {
	var userId = document.getElementById('userId').value;
	if (userId == "" ) {
		console.warn("roleId, 不能为空")
		return;
	}

	if ('WebSocket' in window) {
		if (websocket != null) {
			websocket.CLOSED;
			websocket = null;
		}
		var host =  window.location.host;
		var url = "http://"+ host +"/websocket/online/"+ userId;
		url = url.replace("https", "ws").replace("http", "ws");
		websocket = new WebSocket(url);
	} else {
		console.warn('您的浏览器不支持WebSocket')
	}

	websocket.onopen = function(event) {
		console.log("onopen ......");
	}

	websocket.onmessage = function(event) {
		var res = JSON.parse(event.data);
		// 根据返回的信息，做相关的业务处理
		if (res.code === 402) {
			console.log("您已被强制退出")
		}
	}

	websocket.onclose = function() {
		console.log("onclose......");
	}

	websocket.onerror = function() {
		console.warn("onerror: 发生错误 ......");
	}

	window.onbeforeunload = function() {
		websocket.CLOSED;
	}
}

openSocket()

function sendMessage() {
	if (websocket == "") {
		alert("请先开启Socket")
		return;
	}

	if ('WebSocket' in window) {
		var data = {
			userId: $("#toUserId").val(),
			message: $("#sendMsg").val()
		};
		websocket.send(JSON.stringify(data));
	} else {
		console.warn("您的浏览器不支持WebSocket");
	}
}