前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >nginx代理vue中的websocket

nginx代理vue中的websocket

作者头像
吟风者
发布2021-07-08 15:31:32
9690
发布2021-07-08 15:31:32
举报
文章被收录于专栏:吟风者吟风者

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;
        }
    }
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vue代码
  • vue代理
  • nginx代理配置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档