在vue中如何使用WebSocket 以及nginx代理如何配置WebSocket

WebSocket

WebSocket是一种网络传输协议，可在单个TCP连接上进行全双工通信。浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。

浏览器支持情况

现代浏览器基本都支持WebSocket

在vue中的使用

data(){
return {
socket:null
}
},
mounted () {
window.onbeforeunload = function () {
this.close()
}
this.initSocket()
},
destroyed () {
// 销毁组件时关闭socket
this.close()
},
methods: {
initSocket: function () {
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}else{
// 实例化socket
let path = `ws://10.0.2.15:8800/ws/${id}`;
this.socket = new WebSocket(path)
this.socket.onopen = this.open
this.socket.onerror = this.error
this.socket.onmessage = this.getMessage
this.socket.onclose = this.close
}
},
open () { //连接成功调用send发送数据
console.log("socket连接成功");
let msg = {"test":"hellow"};
this.send(JSON.stringify(msg));
},
error () { //连接失败重连
console.log("socket连接错误")
this.initSocket()
},
getMessage (msg) { // 接收数据
const redata = JSON.parse(msg.data);
console.log("socket接收数据",redata);
},
send (Data) {
this.socket.send(Data)
},
close () {
console.log("socket关闭")
},


详情请查看这里

nginx配置websocket

平时很多项目都是使用nginx部署上线的，那么如果项目里使用了websocket，相对应的也需要去配置nginx。

server {
listen 8099; #端口号
server_name http:10.0.1.55; #服务器地址或绑定域名 #charset koi8-r; #access_log logs/host.access.log main; location /{
root E:/www/; #项目文件夹
index index.html index.htm;
} location /api/ {
proxy_pass http://10.0.2.15:8800/;#应用服务器HTTP地址
}
#websocket代理配置如下
location /ws/ {
proxy_pass http://10.0.2.15:8800;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_read_timeout 36000s; #10小时未传输数据则关闭连接
}
}


默认情况下，如果代理服务器在60秒内未传输任何数据，则连接将关闭。可以使用proxy_read_timeout指令来增加此超时时间 。或者，可以将代理服务器配置为定期发送WebSocket ping帧以重置超时并检查连接是否仍然有效。