vue获取数据
// ws后面跟nginx配置的IP地址加端口，看你自己的配置，也可以是你的域名
let api = 'ws://1.1.0.0:8083/ws';
let socket = new WebSocket(api);
socket.onerror = err => {
console.log("报错了", err);
};
socket.onopen = event => {
console.log('打开链接');
// sendData,就是你的传值，看你的业务需求
socket.send(this.sendData)
};
socket.onmessage = mess => {
console.log('收到消息', JSON.parse(mess.data));
};
socket.onclose = () => {
console.log("连接关闭");
};
nginx 配置转发
#必须添加的
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
#普通的端口
listen 8083;
# 这里你自己的服务器ip或者域名，1.0是我随便写的
server_name 1.1.0.0;
root /web_cloud/dist;
location /{
try_files $uri $uri/ /index.html;
}
# 正常的接口请求
location /api/ {
proxy_pass http://localhost:2021;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# 转发ws
location ^~ /ws {
# 后台准备的websocket地址端口
proxy_pass http://localhost:9092;
# 其他参数都一样
proxy_read_timeout 300s;
proxy_send_timeout 300s;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
解释下 map 的作用主要是根据客户端请求中 $http_upgrade 的值，来构造改变 $connection_upgrade 的值，即根据变量 $http_upgrade 的值创建新的变量 $connection_upgrade，创建的规则就是 {} 里面的东西，所以规则就是:
- 如果
$http_upgrade没有匹配，那 “Connection” 头字段的值会是upgrade。 - 如果
$http_upgrade为空字符串的话，那 “Connection” 头字段的值会是 close。
然后解释一下关键配置, 最重要的就是在反向代理的配置中增加了如下两行，其它的部分和普通的HTTP反向代理没有任何差别。
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
这里面的关键部分在于HTTP的请求中多了如下头部：\
Upgrade: websocket
Connection: Upgrade
这两个字段表示请求服务器升级协议为WebSocket。这时候状态码是 101， 表示协议升级， 服务器处理完请求后，响应如下报文：\
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: upgrade
告诉客户端已成功切换协议，升级为 Websocket协议。握手成功之后，服务器端和客户端便角色对等，就像普通的Socket一样，能够双向通信。 不再进行HTTP的交互，而是开始WebSocket的数据帧协议实现数据交换。
这里使用map指令可以将变量组合成为新的变量，会根据客户端传来的连接中是否带有Upgrade头来决定是否给源站传递Connection头， 这样做的方法比直接全部传递upgrade更加优雅。
