栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 系统运维 > 运维 > Linux

2021-10-29 利用nginx实现https的websocket转发

Linux 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

2021-10-29 利用nginx实现https的websocket转发

利用nginx实现https的websocket转发

  • 环境描述:
  1. web服务器为nginx,前端为一个vue项目
  2. 后端为golang项目,为前端提供api服务
  3. 域名的cname由cloudflare托管,并选择“始终使用HTTPS”
  4. 前端需要使用websocket做实时显示和推送

  • 问题:
  1. 假如项目全盘使用http,则一切正常
  2. nginx升级到https后,websocket失效,但强行使用http访问,勉强也能用
  3. 改由cloudflare托管后,因为全盘默认为 https,所以也就无法再“勉强使用”了

  • 解决方案:
  1. nginx部分: 修改conf配置文件
    首先按照常规方式配置https,比如申请证书,设置443端口等,然后再将URL的/api 以及 /websocket 做两个转发。nginx.conf 文件摘抄如下:
    server {
            # cloudflare始终使用https,因此80端口不需要再设置了	
            listen       443 ssl;
            server_name  mysite.com;
            # 证书路径:
            ssl_certificate      /cert/mysite.com.pem;
            ssl_certificate_key  /cert/mysite.com.key;
    
            ssl_session_cache    shared:SSL:1m;
            ssl_session_timeout  5m;
    
            ssl_ciphers  HIGH:!aNULL:!MD5;
            ssl_prefer_server_ciphers  on;
    
            location / {
                root   html;
                index  index.php index.html index.htm;
            }
    
            # 将https开头的 /api 路径转发到8080端口 , 
            # 比如 https://mysite.com/api/getdata 将转为:http://127.0.0.1:8080/getdata
            location ~ /api/(.*) {
                proxy_pass http://127.0.0.1:8080/$1;
            }
    
            # 将https的 /websocket 转发到 http 的 8081
            location /websocket {
                proxy_pass http://127.0.0.1:8081/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
            }
    }
    

  1. golang 部分
    本程序使用的是Iris Web框架,其他框架大同小异即监听http的8080端口即可:
    app.Run(iris.Addr("0.0.0.0:8080"))
    
    Websocket这边是这样的:
    http.HandleFunc("/", ws) //ws是你的websocket处理函数
    http.ListenAndServe("0.0.0.0:8081", nil)
    
    func ws(w http.ResponseWriter, r *http.Request) {
    ...
    }
    

  1. vue部分
    项目使用axio实现ajax调用。只需要设置一下axio的baseURL即可:
    axios.defaults.baseURL = 'https://mysite.com/api/'
    
    在需要使用websockets的模块,是这样调用的:
    this.ws = new WebSocket('wss://rockage.net/websocket')
    

结语:
本方案比较简单,只是通过nginx将https请求映射成http而已,因此前后端程序无需做太多改动。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/361115.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号