需求对话

提问

我在本地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

关于小程序websocket全套解决方案,Nginx代理wss的更多相关文章

  1. 微信小程序 WebSocket 使用非 443 端口连接

    前言 微信小程序支持使用 WebSocket 连接到服务器,准确地说是带 SSL 的 WebSocket,而微信小程序中不允许使用带端口的 wss 连接,只能使用 443 端口.想使用其他端口就需要在 ...

  2. 微信小程序websocket

    微信小程序websocket 微信小程序带有websocket可以提供使用,但是官方文档写的东西很少,而且小程序后台能力弱这一点也是十分的坑爹,这就导致了socket长连接一切后台就会出现断开的情况, ...

  3. 微信小程序-WebSocket

    wx.connectSocket(OBJECT) 创建一个 WebSocket 连接:一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该 ...

  4. 微信小程序 bug及解决方案

    1.小程序遮罩滚动穿透问题 解决方案: <view class="mask" wx:if="{{showVipRights}}" catchtap='hi ...

  5. 微信小程序-WebSocket应用

    为何有 HTTP 协议还需要 WebSocket ? Http协议 有个缺陷:通信只能由客户端发起.举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果.HTTP 协议做不 ...

  6. 小程序websocket心跳库——websocket-heartbeat-miniprogram

    前言 在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库.如下: 博客:https: ...

  7. 快速上手微信小程序webSocket

    WebSocket是一种在单个TCP连接上进行全双工通信的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范.WebSocket API也被W3 ...

  8. uniapp小程序webSocket封装使用

    目录 1,前言 2,代码实现 3,使用 3.1,初始化 3.2,发送消息 3.3,接收消息 1,前言 最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小 ...

  9. 微信小程序 textarea 简易解决方案

    微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值. 虽然可以使用bindblur事件,但是绑定bindblur事件,如果再点击按钮,则先执行完按钮事件后,再去执行b ...

随机推荐

  1. 2020.10.20 利用POST请求模拟登录知乎

    前两天学习了Python的requests模块的相关内容,对于用GET和PSOT请求访问网页以抓取需要的内容有了初步的了解,想要再从一些复杂的网站积累些经验.最开始我采用最简单的get(url)方法想 ...

  2. elementUI日期选择器 el-date-picker根据所选日期选择禁用

    我遇到这样一个场景,需要动态渲染时间表单,但是后端传过来的数据, 这个时候就不能预先找到想要限制的date了,因为连date本身,也是根据后端传来的数据生成的. 如图: 代码如下: //templat ...

  3. k8s-coredns 介绍和部署

    1.k8s-coredns 实现了集群内部通过服务名进行可以访问.添加服务后,会自动添加一条解析记录 cat /etc/resolv.conf nameserver 10.0.0.2 search k ...

  4. (第一章第二部分)TensorFlow框架之图与TensorBoard

    系列博客链接: (一)TensorFlow框架介绍:https://www.cnblogs.com/kongweisi/p/11038395.html 本文概述: 说明图的基本使用 应用tf.Grap ...

  5. Vue 源码解读(10)—— 编译器 之 生成渲染函数

    前言 这篇文章是 Vue 编译器的最后一部分,前两部分分别是:Vue 源码解读(8)-- 编译器 之 解析.Vue 源码解读(9)-- 编译器 之 优化. 从 HTML 模版字符串开始,解析所有标签以 ...

  6. LeetCode-095-不同的二叉搜索树 II

    不同的二叉搜索树 II 题目描述:给你一个整数 n ,请你生成并返回所有由 n 个节点组成且节点值从 1 到 n 互不相同的不同 二叉搜索树 .可以按 任意顺序 返回答案. 二叉搜索树(Binary ...

  7. SpringBoot入门一:基础知识(环境搭建、注解说明、创建对象方法、注入方式、集成jsp/Thymeleaf、logback日志、全局热部署、文件上传/下载、拦截器、自动配置原理等)

    SpringBoot设计目的是用来简化Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,SpringBoot致力于在蓬勃发 ...

  8. Node.js躬行记(16)——活动配置化

    一直想将一些常规活动抽象化,制作成可配置的.原先的计划是做成拖拽的,那种可视化搭建,运营也能自己搭建页面. 这是一个美好的愿景,但是现实不允许我花太多精力去制作这样一个系统.经过权衡后,先设计成一个可 ...

  9. CF698C题解

    为什么 \(n,k \leq 20\)? 我还以为是什么 \(n,k \leq 10^6\) 的厉害题/qd 看到这个队列操作很迷惑,但是仔细看看要操作 \(10^{100}\) 遍,所以我们可以直接 ...

  10. 最小生成树MST算法(Prim、Kruskal)

    最小生成树MST(Minimum Spanning Tree) (1)概念 一个有 n 个结点的连通图的生成树是原图的极小连通子图,且包含原图中的所有 n 个结点,并且有保持图连通的最少的边,所谓一个 ...