WebSocket的前端实现

关于WebSocket的介绍，网上有很多了，在此就不赘述了，如：菜鸟教程。
这里写一下关于多页面实现WebSocket的方式
代码示例：

// 创建全局对象
const websocket = {
	ws: null,  // 保存WebSocket对象
	url: "ws://localhost:8080", // 后端什么地址、端口号，这边就写什么，平时地址中写 http 改成 ws ， https 改成 wss
	initSocket(userId) { // 参数 userId，作为后端后续发送消息的凭证（保证是当前登陆的用户），测试可以不写
		//判断当前浏览器是否支持WebSocket
		if ('WebSocket' in window) {
			// 创建WebSocket对象，并传入url(必传)
			this.ws = new WebSocket(this.url + '/' +userId)
			/*
				监听几种状态的变化js会回调
			*/
	        // 连接回调
			this.ws.onopen = function (message) {
				console.log('websocket连接中...')
			};
	        // 断开连接回调
			this.ws.onclose = function (message) {
				console.log('websocket已断开连接')
			};
	        // 消息监听回调
			this.ws.onmessage = function (message) {
	            // 处理接受到的消息
	            console.log('websocket接受到的消息：' + message)
			};
		} else {
			console.log('当前浏览器 Not support websocket')
		}
		//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
		window.onbeforeunload = function () {
			this.ws && this.ws.close();
		};
	}
}

需要用到WebSocket的页面（最好在页面加载的时候，就写下方语句或者事件触发也行）：

websocket.initSocket(123) // userId = 123

后端写好后，如果 url 没错，就能看到打印的后端发来的消息了，否则就只有 websocket连接中...

写在后面：因为是多页面，页面之间跳转是通过 window.location.href = xxx.html 实现的，导致WebSocket对象在每次页面加载都会被重新创建（同一页面能长保存），websocket中的内容被初始化，暂时还没想到可以创建一次，一直保有该对象的方法。