本文背景如下:

Vue+SpringBoot 前后端分离,vue采用Nginx作为服务,涉及内外网使用的场景。

技术使用:Stomp 和 rabbitMQ

Nginx增加如下配置:

http {

    map $http_upgrade $connection_upgrade{
            default upgrade;
            `` close;
    }

    upstream websocket{
        server server 10.x.x.xx:15674;
    }

    server{
        listen 8020;

        location /ws {
                proxy_pass http://websocket;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
        }
    } 
}

VUE前端配置(注意https和http的区别):

#如果服务器是https,则使用 wss://,如果是http协议,则使用ws://
this.client = Stomp.client('wss://' + window.location.host + '/ws')

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐