1、把普通的IP访问改为自己的域名，例如我们希望的域名是mywebsocket.test.com，那么前端页面配置的地址如下
// ws协议，注意，域名后面的/webSocket自己随意起，但是要和后台保持一直，别访问不到了
ws://mywebsocket.test.com/webSocket
// wss协议，需要SSL证书，也就是你的域名必须要支持HTTPS
wss://app116386.eapps.dingtalkcloud.com/webSocket2、页面的DEMO如下，比较简单
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的配置如下文章来源：https://www.toymoban.com/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;
# 文件大小限制，默认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 {
#监听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;
# 注意必须设置 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;
# 重复提交情况
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打包部署后，页面刷新报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打包部署后，页面刷新报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;
# 注意必须设置 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;
# 重复提交情况
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/;
}
# 重点在这里，webSocket后面没有斜杠，和其它项目的区别
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;
#升级http1.1到 websocket协议
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
server {
listen 80;
# 自己需要监听的域名
server_name abc.com;
#将请求转成https
rewrite ^(.*)$ https://$host$1 permanent;
}
}
4、nginx命令，每次nginx.conf修改后，需要重新reload文章来源地址https://www.toymoban.com/news/detail-516424.html
#进入到nginx/conf文件夹，然后执行下面的命令
# cd /usr/local/nginx/conf
# 退出
nginx -s quit
# 重新启动
nginx -s reload
# 启动
nginx
# 停止
nginx -s stop到了这里，关于nginx配置websocket或https的转发教程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
