websocket小程序开发测试环境可以,但是真机模式失败的原因解答

websocket小程序开发测试环境可以,但是真机模式失败的原因解答,第1张

环境:消息推送需要使用长联讯,所以采用websocket

遇见问题:微信开发者工具可以使用websocket,但是使用手机真机调试websocket无响应

解决思路:

一.确保websocket调用api的正确使用顺序

二.服务器环境的搭建以及合法域名的校验

三.开发者后台要配置wss和ip白名单

第一步:确保API的正确调用

二.服务器搭建以及合法域名的校验以及wss的配置

1.这里提到的服务器搭建,主要是因为在微信小程序中,websocket支持的一定是wss的通信协议,当然也不是说你用ws不行,但是我感觉测试可以,如果要配置上线的话,还是需要使用wss的!可以在后台管理界面进行配置

---开发---开发设置---服务器域名设置

切记:一个月只有五次的修改机会!慎重哦

修改成功后,可以打开开发工具的详情页面进行查看,来查看是否配置成功

2.合法域名的校验

众所周知,小程序在开发过程中,只要你点击不校验合法域名,就可以不进行跨域处理,但是如果要求上线,一定要进行配置,防止出现跨域问题。然后合法域名也是要求https,需要携带证书!

三.会遇到的问题!

当你配置完所有以后,你会发现在开发环境下,你是可以使用websocket的,但是当你选择真机测试的时候,你会发现你的websocket失效了,你如果打开两个管理控制台,你会发现,开发工具的上面, 长联讯 的 属性type :为websocket,但是真机环境下的 长联讯 的 属性type :为xhr!

当时我以为是我api调用的问题,查阅了好多资料,都没得到解决!最后在微信开发社区里面找到了和我遇见一模一样问题的人!询问以后才得知解决办法!!!说实话,解决方法,让我有点哭笑不得

是不是和我遇到的一样!!!

四.解决办法!!!

直接上线就可以了,线上环境就可以成功了!如果觉得直接上线不好!你可以提交为体验版本即可

综上所述...websocket在真机上和开发工具上的不一致,就能得到解决了【点击了解更多加盟项目】

对于域名和服务器的选择上,要看微信小程序制作方是否硬性需要进行绑定开发,如果没有规定绑定开发的话可以自主选择域名和服务器,像这个在阿里云或iisp都是有相关服务的。

具体方法:

先在utils文件夹粘贴一个io的js

然后 npm install wxapp-socket-io

config文件夹下新建一个socket.js,对socket连接进行封装,如下:

const io = require('../utils/io.js')

let url = 'wss://......'

let wsStatus = false

let onSocket = null

export const connect = function(cb){

if(!onSocket){

onSocket = io(url)

onSocket.on('connect', function (res) {

cb(true,onSocket)

wsStatus = true

})

setTimeout(function(){

if(!wsStatus){

cb(false,onSocket)

}

},10000)

}else{

cb(true,onSocket)

}

}

在要引用的页面调用,全局封装订阅方法

let openSocket = require('../../config/socket')

let app = getApp()

let socket = null

Page({

data: {

zl: [[422, 400, 468, 834, 785, 446, 845, 517, 630, 797, 890, 529, 553, 425, 469, 470, 837, 841, 521, 525], [422, 400, 468, 834, 785, 446, 845, 517, 630, 797, 890, 529, 553, 425, 469, 470, 837, 841, 521, 525]]

},onLoad: function () {

let that = this

//socket调用

openSocket.connect(function (status, ws) {

if (status) {

socket = ws            this.subscribe('zl')//对封装好对订阅方法进行调用

socket.on('broadcast', function (msg) {//广播

console.log("broadcast")

console.log(msg)

})

} else {

alert("socket 连接失败")

}

})

},subscribe: function (type) {

if (socket) {

let eis = this.data[type]

if (eis &&eis.length >0) {

let param = {//仅供参考,根据接口自行更改

eis: eis.join(',')

}

socket.emit('subscribe', JSON.stringify(param))

}

}

}})

注:创建一个 WebSocket 连接;一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该连接,并重新创建一个 WebSocket 连接。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/8164642.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-14
下一篇 2023-04-14

发表评论

登录后才能评论

评论列表(0条)

保存