最近由于一个功能需求了解了 WebSocket ，刚好也想记录一下自己前端学习的过程，就记录一下
websocket 文档传送门： https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
简单的了解一下 websocket
很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源。
在这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
上面是百度得到的，文字比较多，按照我的理解就是：前端想得到数据，就得向后端请求数据的接口，不去请求接口，前端拿不到需要的数据，当前端想得到数据但又不想频繁的去请求接口的时候 WebSocket 就能凸显出它的特点， 服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。
代码（以下用的地址参数为举例）
<template>
<div>
<div>
<biaoqing @send="contentChange" :value="commentvalue" />
</div>
</div>
</template>
<script>
import biaoqing from './components/biaoqing/biaoqing.vue'
export default {
components: {
biaoqing
},
data () {
return {
commentData：[],
commentvalue: '',
socket: ""
}
},
mounted () {
// 初始化
this.init()
},
methods: {
contentChange(value) {
if (value) {
let obj = {
a: "1",
b: "2",
c: "3"，
d: "4",
e: "5"
}
this.socket.send(JSON.stringify(obj));
} else {
this.$message.error('不能发送空消息');
}
},
init() {
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}else{
let url = "ws://localhost:8080"
// 实例化socket wss:https， ws:http
this.socket = new WebSocket(url);
// 监听socket连接
this.socket.onopen = this.open
// 监听socket错误信息
this.socket.onerror = this.error
// 监听socket消息
this.socket.onmessage = this.getMessage
//监听socket关闭
this.socket.onclose = this.close
}
},
open() {
console.log("socket连接成功")
},
error() {
console.log("连接错误")
// 连接建立失败重连
this.init()
},
getMessage(msg) {
console.log(msg.data)
var data = eval("(" + msg.data + ")");
var type = data.type;
//初始化发送需要的参数，我的项目里 这里的参数是后端那边设置的，前端把后端需要的传过去
let obj = {
a: "1",
b: "2",
c: "3"
}
switch (type) {
case 'init':
this.socket.send(JSON.stringify(obj));
break;
case 'message':
//数据发送成功后返回的数据 取出需要的数据加入显示的数据里
var obj = {
a: data.a,
b: data.b,
c: data.c,
d: data.d,
e: data.e,
}
this.commentData.push(obj)
break;
case 'bind':
console.log('绑定成功',data);
break;
case 'save':
//这里可以写需要请求的接口
$.ajax({
type:"POST",
url:"http://xxx.xxx",
dataType:"json",
data:你要传的参数,
success:function(result){
// console.log(result,msg);
}
});
break;
}
},
send() {
this.socket.send(params)
},
close() {
console.log("socket已经关闭")
}
},
unmounted() {
this.socket.close() //离开路由之后断开websocket连接
},
}
</script>
以上是我写的示例，如果有不足之处，可以指出来哦 ！！！
