在vue中使用webSocket

webSocket经常用于需要后端主动发送数据给前端的场景，因为我做的一个项目中需要时时刷新列表里面的状态，而用定时任务去刷状态太过耗费性能，所以使用了webSoclet，下面是代码

下面展示一些 内联代码片。

// webSocet
	init: function(url,getMessage) {
		if (typeof(WebSocket) === "undefined") {
			alert("您的浏览器不支持socket")
		} else {
			// 实例化socket
			this.socket = new WebSocket(url)
			// 监听socket连接
			this.socket.onopen = this.open
			// 监听socket错误信息
			this.socket.onerror = this.error
			// 监听socket消息
			this.socket.onmessage = getMessage
		}
	},
	open: function() {
		console.log("socket连接成功")
	},
	error: function() {
		console.log("连接错误")
	},
	send: function() {
		this.socket.send(params)
	},
	close: function() {
		this.socket.close()
		console.log("socket已经关闭")
	},

以上是写到mixins.js里面的公共代码

接下来是页面中引用的代码

//这是写入mounted钩子里面的代码
mixin.methods.init(url, this.getMessage)//这里需要注意的是因为是把函数当作参数传递，所以不需要加括号，否则会立即执行

//而methods里面也要写入一个函数
getMessage: function(msg) {
  //meg就是后端返回的数据，可以在这个函数里面写逻辑代码
},


//最后别忘了在destroyed钩子里把webSocket断开，不断开可能会出现浏览器缓存的问题，也可能会重复的去实例webSocket
mixin.methods.close()

以上就是webSocket的全部代码，在这里记录一下，以后可能会用到…

如果要配置全局的ws请看：https://www.jianshu.com/p/f7d743efcd59