1、把普通的IP访问改为自己的域名，例如我们希望的域名是mywebsocket.test.com，那么前端页面配置的地址如下

// ws协议，注意，域名后面的/webSocket自己随意起，但是要和后台保持一直，别访问不到了
ws://mywebsocket.test.com/webSocket

// wss协议，需要SSL证书，也就是你的域名必须要支持HTTPS
wss://app116386.eapps.dingtalkcloud.com/webSocket

2、页面的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的配置如下

#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

#进入到nginx/conf文件夹，然后执行下面的命令
# cd /usr/local/nginx/conf

# 退出
nginx -s quit

# 重新启动
nginx -s reload

# 启动
nginx

# 停止
nginx -s stop