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

Zoom 发布于2019-07-01 10:47 / 1325人阅读

摘要：需求对话提问我在本地能够使用协议去链接，但是小程序不能使用。回答由于小程序使用的是加密协议，所以需要使用。这里与的关系就相当于于的关系。例如至此代理就算全部。

需求对话 提问

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

回答

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

提问

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

回答

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

前提必备：

需要先为你的websocket域名申请SSL

宝塔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"
      })   
    })
  }

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

私有云超融合服务器关于小程序小程序关于数据统计有关于c语言的小程序代理小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/29481.html

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

摘要：需求对话提问我在本地能够使用协议去链接，但是小程序不能使用。回答由于小程序使用的是加密协议，所以需要使用。这里与的关系就相当于于的关系。例如至此代理就算全部。需求对话提问我在本地web能够使用ws协议去链接websocket，但是小程序不能使用。回答由于小程序使用的是SSL加密协议，所以需要使用wss。这里wss与ws的关系就相当于https于http的关系。提问我用的是...

kel 2019-07-25 14:28 评论0 收藏0
九种跨域方式实现原理（完整版）

摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心...

edgardeng 2019-08-23 14:57 评论0 收藏0
九种跨域方式实现原理（完整版）

摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心...

justCoding 2019-08-02 14:10 评论0 收藏0
九种 “姿势” 让你彻底解决跨域问题

摘要：什么是跨域当协议域名端口号，有一个或多个不同时，有希望可以访问并获取数据的现象称为跨域访问，同源策略限制下都是不支持跨域的。命名是随意的，只要是符合一级域名与二级域名的关系即可，然后访问。 showImg(https://segmentfault.com/img/remote/1460000018998493); 阅读原文同源策略同源策略/SOP（Same origin pol...

charles_paul 2019-08-23 12:18 评论0 收藏0
使用HTML5的WebSocket实现服务端和客户端数据通信（有演示和源码）

摘要：没有同源限制，客户端可以与任意服务器通信。本文使用实例给大家讲解使用的实现服务端和客户端相互发送和接受数据的过程。事件，通信发生错误时触发。当我们输入李旺并发送后，服务端收到了内容为李旺的消息后，发送了相应的消息给客户端。在线演示源码下载 WebSocket协议是基于TCP的一种新的网络协议。WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种...

Me_Kun 2019-08-05 13:27 评论0 收藏0