关于小程序websocket全套解决方案,Nginx代理wss
需求对话
提问
我在本地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使用
我这里只是做连接测试。只是一个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
关于小程序websocket全套解决方案,Nginx代理wss的更多相关文章
- 微信小程序 WebSocket 使用非 443 端口连接
前言 微信小程序支持使用 WebSocket 连接到服务器,准确地说是带 SSL 的 WebSocket,而微信小程序中不允许使用带端口的 wss 连接,只能使用 443 端口.想使用其他端口就需要在 ...
- 微信小程序websocket
微信小程序websocket 微信小程序带有websocket可以提供使用,但是官方文档写的东西很少,而且小程序后台能力弱这一点也是十分的坑爹,这就导致了socket长连接一切后台就会出现断开的情况, ...
- 微信小程序-WebSocket
wx.connectSocket(OBJECT) 创建一个 WebSocket 连接:一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该 ...
- 微信小程序 bug及解决方案
1.小程序遮罩滚动穿透问题 解决方案: <view class="mask" wx:if="{{showVipRights}}" catchtap='hi ...
- 微信小程序-WebSocket应用
为何有 HTTP 协议还需要 WebSocket ? Http协议 有个缺陷:通信只能由客户端发起.举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果.HTTP 协议做不 ...
- 小程序websocket心跳库——websocket-heartbeat-miniprogram
前言 在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库.如下: 博客:https: ...
- 快速上手微信小程序webSocket
WebSocket是一种在单个TCP连接上进行全双工通信的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范.WebSocket API也被W3 ...
- uniapp小程序webSocket封装使用
目录 1,前言 2,代码实现 3,使用 3.1,初始化 3.2,发送消息 3.3,接收消息 1,前言 最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小 ...
- 微信小程序 textarea 简易解决方案
微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值. 虽然可以使用bindblur事件,但是绑定bindblur事件,如果再点击按钮,则先执行完按钮事件后,再去执行b ...
随机推荐
- 解决 Page 'http://localhost:63342/v3/js/math/math.map' requested without authorization页面未授权问题
用webstorm调试页面时,老是弹出对话框说页面未授权,如下图: 解决方法尝试了两种都有效,感觉第一种是正解通用,第二种大家也可以了解一下作为参考 第一种: File--Settings如下图 第二 ...
- LeetCode-062-不同路径
不同路径 题目描述:一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 "Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下 ...
- 基于kubernetes平台微服务的部署
基于kubernetes平台微服务的部署 首先下载插件: kubernetes Continuous Deploy 然后去找 .kube/ 里的config 复制里面的内容 去添加凭据: 然后就是脚本 ...
- 服务端&客户端注册进Eureka
目录 服务端(接口提供方) 创建项目 导入Eureka客户端POM 启动类添加注解 配置YML 暴漏接口 启动服务 集群 配置成功后页面如下 客户端(接口调用方) 修改Yml文件 配置类 启动类添加注 ...
- layui ajax删除
表单页面 //监听行工具事件 table.on('tool(test)', function(obj){ var data = obj.data; //console.log(obj) if(obj. ...
- laravel 数据验证规则
return [ 'accepted' => '必须为yes,on,1,true', 'active_url' => '是否是一个合法的url,基于PHP的checkdnsrr函数,因此也 ...
- 手写 Vue2 系列 之 编译器
前言 接下来就要正式进入手写 Vue2 系列了.这里不会从零开始,会基于 lyn-vue 直接进行升级,所以如果你没有阅读过 手写 Vue 系列 之 Vue1.x,请先从这篇文章开始,按照顺序进行学习 ...
- 《手把手教你》系列基础篇(七十七)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试- 上篇(详解教程)
1.简介 今天主要是讲解和分享:TestNG中一个类中有多个测试方法的时候,多个测试方法的执行顺序或者依赖关系的问题.如果不用dependsOnMethods,testNG会自动根据@Test方法名称 ...
- Java的jmap命令使用详解
jmap命令简介 jmap(Java Virtual Machine Memory Map)是JDK提供的一个可以生成Java虚拟机的堆转储快照dump文件的命令行工具.除此以外,jmap命令还可以查 ...
- ArcMap操作随记(10)
1.基于点生成辐射线 [缓冲区]→[构造视线] 2.求算点集中于剩余点距离总和最小的点 [构造视线]→[计算几何]→[汇总] 3.关于空间参考,关于投影 ①横轴墨卡托投影 "等角横轴切圆柱投 ...