1、把普通的IP訪問改為自己的域名，例如我們希望的域名是mywebsocket.test.com，那么前端頁面配置的地址如下
// ws協(xié)議，注意，域名后面的/webSocket自己隨意起，但是要和后臺(tái)保持一直，別訪問不到了
ws://mywebsocket.test.com/webSocket
// wss協(xié)議，需要SSL證書，也就是你的域名必須要支持HTTPS
wss://app116386.eapps.dingtalkcloud.com/webSocket2、頁面的DEMO如下，比較簡(jiǎn)單
var wesocketServer = "wss://mywebsocket.test.com/webSocket";
var myWebSocket = new WebSocket(wesocketServer);
myWebSocket.onopen = function () {
var loginMessage = {
authorization: publicWechatToken,
event: "AUTHORIZATION",
source: "WE_CHAT"
};
myWebSocket.send(JSON.stringify(loginMessage));
myWebSocketInterval = setInterval(function(){
var heartMessage = {
authorization: publicWechatToken,
event: "ROBOT_HEARTBEAT",
source: "WE_CHAT"
};
myWebSocket.send(JSON.stringify(heartMessage));
},30*1000);
}
myWebSocket.onmessage = function (e) {
var data = JSON.parse(e.data);
console.log(data);
}
myWebSocket.onclose = function () {
clearInterval(myWebSocketInterval);
}3、nginx的配置如下文章來源：http://www.zghlxwxcb.cn/news/detail-516424.html
#user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
# 文件大小限制，默認(rèn)1m
client_max_body_size 50m;
client_header_timeout 1m;
client_body_timeout 1m;
proxy_connect_timeout 60s;
proxy_read_timeout 1m;
proxy_send_timeout 1m;
# websocket需要增加該配置
map $http_upgrade $connection_upgrade {
default keep-alive;
'websocket' upgrade;
}
#gzip on;
upstream abc_test_websocket_name{
server 172.168.1.3:9041;
}
upstream abc_prod_server_name{
server 172.168.1.4:8940;
}
upstream abc_test_server_name{
server 172.168.1.5:8990;
}
server {
#監(jiān)聽443端口
listen 443 ssl;
#你的域名
server_name dingtalktest.abc.com;
#ssl證書的pem文件路徑
ssl_certificate /enterprise_wx/ssl/6434864__abc.com.pem;
#ssl證書的key文件路徑
ssl_certificate_key /enterprise_wx/ssl/6434864__abc.com.key;
location /myProject/ {
# enterprise wechat test
add_header X-Content-Type-Options nosniff;
proxy_set_header X-scheme $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 注意必須設(shè)置 Host，否則使用 Java Client 無法正常訪問 MinIO
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_hide_header X-Powered-By;
proxy_hide_header Vary;
client_max_body_size 2048m;
proxy_pass http://abc_test_server_name;
# 重復(fù)提交情況
proxy_next_upstream off;
proxy_read_timeout 600;
proxy_send_timeout 600;
proxy_connect_timeout 600;
}
location /user/ {
# 這里的8181是自己的nacos
proxy_pass http://172.168.1.1:8181/user/;
}
location /auth/ {
proxy_pass http://172.168.1.1:8181/auth/;
}
location /role/ {
proxy_pass http://172.168.1.1:8181/role/;
}
location / {
index index.html index.htm;
root /var/www/myShop/h5;
# 下面這句話可以解決vue打包部署后，頁面刷新報(bào)404的問題
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
error_page 404 /index.html;
location = /index.html {
root /var/www/myShop/h5;
}
}
server {
listen 80;
server_name abc.com;
location / {
index index.html index.htm;
root /var/www/myShop/h5;
# 下面這句話可以解決vue打包部署后，頁面刷新報(bào)404的問題
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
error_page 404 /index.html;
location = /index.html {
root /var/www/myShop/h5;
}
location /myProject/ {
# enterprise wechat test
add_header X-Content-Type-Options nosniff;
proxy_set_header X-scheme $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 注意必須設(shè)置 Host，否則使用 Java Client 無法正常訪問 MinIO
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_hide_header X-Powered-By;
proxy_hide_header Vary;
client_max_body_size 2048m;
proxy_pass http://abc_prod_server_name;
# 重復(fù)提交情況
proxy_next_upstream off;
proxy_read_timeout 600;
proxy_send_timeout 600;
proxy_connect_timeout 600;
}
location /user/ {
# 這里的8181是自己的nacos
proxy_pass http://172.168.1.1:8181/user/;
}
location /auth/ {
proxy_pass http://172.168.1.1:8181/auth/;
}
location /role/ {
proxy_pass http://172.168.1.1:8181/role/;
}
# 重點(diǎn)在這里，webSocket后面沒有斜杠，和其它項(xiàng)目的區(qū)別
location /webSocket {
proxy_pass http://abc_test_websocket_name;
proxy_read_timeout 300s;
proxy_send_timeout 300s;
proxy_redirect off;
proxy_set_header Host $host:5052;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#升級(jí)http1.1到 websocket協(xié)議
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
server {
listen 80;
# 自己需要監(jiān)聽的域名
server_name abc.com;
#將請(qǐng)求轉(zhuǎn)成https
rewrite ^(.*)$ https://$host$1 permanent;
}
}
4、nginx命令，每次nginx.conf修改后，需要重新reload文章來源地址http://www.zghlxwxcb.cn/news/detail-516424.html
#進(jìn)入到nginx/conf文件夾，然后執(zhí)行下面的命令
# cd /usr/local/nginx/conf
# 退出
nginx -s quit
# 重新啟動(dòng)
nginx -s reload
# 啟動(dòng)
nginx
# 停止
nginx -s stop到了這里，關(guān)于nginx配置websocket或https的轉(zhuǎn)發(fā)教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
