前端 websocket 的简单使用

websocket创建实例, 监听事件

if (window.WebSocket){
	let ws = new WebSocket('地址')    // 建立连接
	ws.onopen = function(){ }        // 服务器连接成功
	ws.onclose = function(){ }       // 服务器连接关闭
	ws.onerror = function(){ }       // 服务器连接出错
	ws.onmessage = function(){ }     // 解析信息
}

属性

ws.readyState
// 0 正在链接中
// 1 已经链接并且可以通讯
// 2 连接正在关闭
// 3 连接已关闭或者没有链接成功
ws.url
// 是一个只读属性
//返回构造函数创建WebSocket实例对象时URL的绝对路径。

方法

ws.send() // 发送请求
ws.close() // 关闭连接

vue中使用

data(){
	retrun {
		ws: null, // WebSocket实例
		time: 5000, // 计时器时间
	}
},
created(){
	this.initWebSocket()
},
methods:{
	initWebSocket(){
		if (window.WebSocket){
			let ws = new WebSocket('地址')    // 建立连接
			this.ws = ws
			// 服务器连接成功
			ws.onopen = function(){
				console.log('连接成功')
				ws.send('hello') // 给后台发消息
				this.heartbeat() // 开启心跳
			}
			// 服务器连接关闭
			ws.onclose = function(){
				console.log('连接关闭')
			}
			// 服务器连接出错
			ws.onerror = function(){
				console.log('连接出错')
			}
			// 解析信息
			ws.onmessage = function(e){
				console.log(e,'接收数据')
			}
		},
		// 心跳
		heartbeat(){
			setInterval(() => {
            	this.ws.send('心跳')
        	}, this.time);
		}
	}
}