websocket的使用及nginx通信的ws代理配置
- 最近在做的vue项目要使用websocket,本文讲述了websocket在vue中使用及打包后使用nginx代理。
1、创建vue项目,这里不在详细去说,如果在创建项目时有疑问请访问: vue创建项目.
<template>
<div></div>
</template>
<script>
export default {
name: 'socket',
data(){
return {
websock: null,
}
},
create(){
this.initWebSocket(); // 初始化websocket
},
method:{
// 初始化websocket
initWebSocket(){
let userId = 1;
let wsUrl = 'ws://127.0.0.1:8080/webSocketServer/'+ userId +'';
this.websock = new WebSocket(wsUrl); // 建立websocket
this.websock.onopen= this.webSocketOnopen(); // 建立连接
this.websock.onmessage = this.webSocketOnmessage; // 接受数据
this.websock.onerror = this.webSockeToOnerror; // 连接失败后重新连接
this.websock.onclose = this.webSocketClose; // 关闭socket
},
// 建立链接
webSocketOnopen(){
this.webSocketsEnd();
},
// 发送数据
webSocketsEnd(){
let actions = {'test','测试链接socket'};
this.websock.send(JSON.stringify(actions));
},
// 接收后端返回的数据
webSocketOnmessage(data){
console.log(data);
},
// 建立链接失败后重连
websocketonerror(){
// 使用setTimeout是为了避免重新链接过快导致浏览器卡死
setTimeout(()=>{
this.initWebSocket();
},10000)
},
// 关闭连接
websocketclose(data){
console.log('socket断开连接',data);
},
},
// 离开当前路由后销毁socket连接
destroyed() {
this.websock.close();
},
}
</script>
- 到目前为止,我们已经创建好了webSocket了,但是在打包后实际应用中,难免会遇到很多问题,这里我们选择了nginx代理方式进行演示。
1、配置nginx,打开nginx.conf
server {
listen 89;
server_name localhost;
location / {
root iot/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://127.0.0.1:8080;
# 开启nginx对websocket的支持
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
2、进入到vue全局配置.env下,如果没有.env,请在package.json同级目录下创建。
# 配置socket使用地址
VUE_APP_BASE_API = /api
3、其次进入到vue组件中进行修改,具体如下:
<template>
<div></div>
</template>
<script>
export default {
name: 'socket',
data(){
return {
websock: null,
}
},
create(){
this.initWebSocket(); // 初始化websocket
},
method:{
// 初始化websocket
initWebSocket(){
let userId = 1;
let socketURL = process.env.VUE_APP_BASE_API; // 获取vue全局配置env的变量
let wsUrl = `ws://`+ location.host + socketURL +`/webSocketServer/`+userid+``;
this.websock = new WebSocket(wsUrl); // 建立websocket
this.websock.onopen= this.webSocketOnopen(); // 建立连接
this.websock.onmessage = this.webSocketOnmessage; // 接受数据
this.websock.onerror = this.webSockeToOnerror; // 连接失败后重新连接
this.websock.onclose = this.webSocketClose; // 关闭socket
},
// 建立链接
webSocketOnopen(){
this.webSocketsEnd();
},
// 发送数据
webSocketsEnd(){
let actions = {'test','测试链接socket'};
this.websock.send(JSON.stringify(actions));
},
// 接收后端返回的数据
webSocketOnmessage(data){
console.log(data);
},
// 建立链接失败后重连
websocketonerror(){
// 使用setTimeout是为了避免重新链接过快导致浏览器卡死
setTimeout(()=>{
this.initWebSocket();
},10000)
},
// 关闭连接
websocketclose(data){
console.log('socket断开连接',data);
},
},
// 离开当前路由后销毁socket连接
destroyed() {
this.websock.close();
},
}
</script>