websocket vue 本地开发及线上配置

本地开发

websocket 跨域配置

    proxyTable: {
      '/ws': {
        target: 'http://localhost:2080/', // websocket地址
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/': '/'
        }
      }
    }

websocket 初始化代码

    const wsPrefix = (window.location.protocol === 'https:') ? 'wss://' : 'ws://'
    let ws = wsPrefix + window.location.host + '/ws'
    console.log('ws', ws)
    ChatData.mySocket = new WebSocket(ws)

部署

nginx配置

	location /ws {
            proxy_pass http://172.18.32.205:2080/ws;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'Upgrade';
            proxy_set_header Remote_addr $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_read_timeout 600s;
	}

支持 本地开发、线上http、线上https