nginx代理vue中的websocket

vue代码

代码语言：javascript复制

    <script>
        export default {
            data(){
                return {
                    webSocket: null
                }
            },
            mounted(){
                this.initWebSocket();
            },
            methods:{
                initWebSocket(){
                    let socket_api = process.env.VUE_APP_SOCKET_API;
                    const url = `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}${socket_api}`;
                    this.socket = new WebSocket(`${url}/websocket`);
                    this.webSocket = new WebSocket(wsServer);
                    this.webSocket.onopen = function(event) {

                    };
                    this.webSocket.onmessage = function(msg) {

                    };
                    this.webSocket.onClose = function(msg) {

                    };
                    this.webSocket.onError = function(err) {

                    }
                }
            }
        }
    </script>

vue代理

代码语言：javascript复制

      [process.env.VUE_APP_SOCKET_API]: {
        target: "ws://localhost:8888", //socket 后台接口，连接本地服务
        ws: true,
        //是否跨域
        changeOrigin: true,
        pathRewrite: {
          ["^"   process.env.VUE_APP_SOCKET_API]: ""
        }
      }

nginx代理配置

代码语言：javascript复制

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on;
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''   close;
      }
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }

        location /socket/ {
            rewrite ^/socket/(.*)$     /$1 break;
            proxy_pass http://localhost:8888;

            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            proxy_set_header Upgrade websocket;
            proxy_set_header Connection Upgrade;

            proxy_http_version 1.1;
            proxy_connect_timeout 4s;                #配置点1
            proxy_read_timeout 300s;                  #配置点2，如果没效，可以考虑这个时间配置长一点
            proxy_send_timeout 12s;                  #配置点3
            #add_header Content-Security-Policy upgrade-insecure-requests;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
    }
}

nginx 代理 配置

0 人点赞