• 关于小程序websocket全套解决方案,Nginx代理wss


    需求对话

    提问

    我在本地web能够使用ws协议去链接websocket,但是小程序不能使用。

    回答

    由于小程序使用的是SSL加密协议,所以需要使用wss。这里wss与ws的关系就相当于https于http的关系。

    提问

    我用的是宝塔Linux,SSL好申请,但是wss我就不会配置了。

    回答

    对的宝塔Linux申请SSL很简单,一键申请,相对https实现就很简单了。那我们开始做配置吧。但前提你需要保证以下的几个必备条件。

    前提必备:

    1. 需要先为你的websocket域名申请SSL
    2. 宝塔Linux(非宝塔其实一样能用,但是我这里的教程主要针对宝塔Linux做的)

    Nginx代理WSS

    这一步主要用来实现wss转ws(即转到http)

    图片描述

    打开管理后台,点开“网站”->“相应的域名”->“配置文件”(我糊的地方只是我的域名和ip信息,不是重要信息,不用在意)

    图片描述

    搜索#SSL-END,在这串注释后面加上以下代码,图上我已经加上了,所以和你的肯定不一样

        #wss协议转发 小程序里面要访问的链接
        # 访问:wss://xxxx.com/wss
        location /wss {
            proxy_pass http://host:8080;#代理到上面的地址去,
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
        }

    关于以上的配置我必须要说清楚,proxy_pass http://host:8080后面的地址加端口是你websocket的地址,这里必须加上端口,例如:http://baidu.com:8080,这里需要手动改的就是这一个地方。

    先别关闭这个窗口,接下来还有

    图片描述

    接下来把鼠标移到最顶端,也就是server上面添加以下代码,一样的道理,我这里已经添加了,所以和你的不一样,以你的为准

    map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }
    upstream websocket {
        server ip:8080;  #这里可以是多个服务端IP(分多行),设置权重就可以实现负载均衡了
    }

    这里需要手动设置一下,就是在upstream websocket里面有一个ip:8080。这个ip请替换成你的IP,IP在什么地方可以看到呢,看你宝塔linux左上角就有了,对就是那个。例如:server 114.114.114.114:8080

    至此Nginx代理wss就算全部ok。请注意我用的socket端口是8080,如果你的端口被占用,请你更改,当然如果改了请把一系列的都改了

    小程序websocket使用

    官方文档:https://developers.weixin.qq....

    我这里只是做连接测试。只是一个Demo

      miniWebsocket:function(){
        wx.connectSocket({
          url: 'wss://host/wss',
          //这里只需要填写你开始配置的域名就好,但是请在域名后面添加一个/wss。例如:wss://baidu.com/wss
        })
        wx.onSocketOpen(function(res){
          console.log(res)
          console.log('打开成功')
        })
        wx.onSocketMessage(function(res){
          console.log('收到服务器信息'+JSON.stringify(res))
        })
        wx.onSocketOpen(function (res) {
          console.log('WebSocket连接已打开!')
          console.log('数据发送')
          wx.sendSocketMessage({
            data: 'ekeylee'
          })   
        })
      }

    图片描述

    上图就是我已经配置好小程序的返回信息,如果有什么地方写的不是很清楚,请文末留言,感谢

    本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hicch2kjaab

  • 相关阅读:
    Linux 用户和用户组配置文件
    Linux su和sudo的区别
    4-selenium-xpath定位
    3-selenium-元素定位
    1-selenium3安装
    vim 查看行数
    java学习day27-JavaScript
    java学习day26-CSS定位
    java学习day26-CSS(2)-布局+属性
    java学习day26-CSS(1)
  • 原文地址:https://www.cnblogs.com/10manongit/p/12694138.html
Copyright © 2020-2023  润新知