聊天室(二)__ unipush 推送实现详细教程

这篇具有很好参考价值的文章主要介绍了聊天室(二)__ unipush 推送实现详细教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、推送作用

推送作用我就不废话了,能做推送的都知道作用,直接上干货。

聊天室(二)__ unipush 推送实现详细教程

 

二、unipush 快速开通

 

Dcloud 开发者实名认证注册账号,绑定对应的 app 信息。

uni-push产品有2个入口:

  1. 通过 HBuilderX(3.5.1及其以上版本)进入

打开 HBuilderX,双击项目中的 “manifest.json” 文件,选择“App 模块配置”,向下找到“Push(消息推送)”,勾选后,点击 “uniPush” 下面的配置链接。如下图所示:

  1. 通过开发者中心进入

使用 HBuilder 账号登录 开发者中心 ,登录后 会进入“uniPush”-“Uni Push 2.0(支持全端推送)”-“应用信息”,点击“当前应用”选择要操作的应用。

以上两种方式均可进入uniPush 应用开通界面。如下图所示:

 

聊天室(二)__ unipush 推送实现详细教程

 

按照国家法律要求,所有提供云服务的公司在用户使用云服务时都需要验证手机号。

用户初次开通 uni-push 时,需要向个推同步手机号信息(DCloud开发者无需再注册个推账户)。

关联服务空间说明:uni-push2.0需要开发者开通uniCloud。不管您的业务服务器是否使用uniCloud,但专业推送服务器在uniCloud上。生成云函数,放置云服务器上。

三、push 模块

Push模块管理推送消息功能,可以实现在线、离线的消息推送,通过 plus.push 可获取推送消息管理对象。

3.1、获取设备信息

客户端标识信息用于业务服务器下发推送消息时提交给推送服务器的数据,用于说明下发推送消息的接收者(客户端)。通常需要客户端在第一次运行时获取并提交到业务服务器绑定。

ClientInfo : 客户端推送标识信息对象

let clientInfo = plus.push.getClientInfo()let cid = cliendInfo.clientId

 

cid : 客户端推送标识,类似于联系人的电话号码。

3.2、推送事件监听器

void plus.push.addEventListener( event, listener, Boolean );

添加推送消息事件监听器,当指定推送事件发出时触发。

参数:

  • type: ( String ) 必选 事件类型

  • 支持事件类型:"click"-从系统消息中心点击消息启动应用事件;"receive"-应用从推送服务器接收到推送消息事件。

  • listener: ( PushReceiveCallback ) 必选 事件监听器回调函数,在接收到推送消息时调用

  • capture: ( Boolean ) 可选 是否捕获事件,此处可忽略

平台支持:

  • Android - 2.2+ (支持)

  • iOS - 4.3+ (支持) :

  • 在客户端在运行时收到推送消息触发receive事件,离线接收到的推送消息全部进入系统消息中心。 

plus.push.addEventListener('receive',(message)=>{    
//收到透传消息,执行该事件
})

点击推送事件示例:

plus.push.addEventListener('click',(message)=>{
   // 点击通知消息的时候执行该事件
   // message 推送的所有信息
   let payload = message.payload;//自定义内容获取
   try{
      //自己的业务逻辑 如页面跳转,网络跳转
   }catch(err){    }
})

3.3、自定义推送消息栏

void plus.push.createMessage( content, payload, option );

说明:

在本地直接创建推送消息,并添加到系统消息中心。

参数:

  • content: ( String ) 必选 ,消息显示的内容,在系统通知中心中显示的文本内容。

  • payload: ( String | Object ) 可选,消息承载的数据,可根据业务逻辑自定义数据格式。

  • options: ( MessageOptions ) 可选 创建消息的额外参数,参考MessageOptions。如图标、标题等。

有些童鞋虽然自定义了推送消息,但是发现无论怎么配置参数都不起作用。这是什么原因呢?

3.4、setAutoNotification

setAutoNotification 设置程序是否将消息显示在系统消息中心。

void plus.push.setAutoNotification( notify );

 

说明:

默认情况下程序在接收到推送消息后将会在系统消息中心显示,通过此方法可关闭默认行为,接收到推送消息后不在系统消息中心显示,通过addEventListener方法的“receive”事件监听处理接收到的消息。在这种模式下可通过createMessage方法创建在系统消息中心显示的消息。

参数:

  • notify: ( Boolean ) 必选 是否自动提示推送消息

  • 可取值true或false,true表示自动显示推送消息,false则不显示。默认值为true。

3.5、清空所有推送消息

void plus.push.clear();

上面列举了超级常用的几个方法,剩余的大家看官方文档,方法介绍一看就会。

官方文档:https://www.html5plus.org/doc/zh_cn/push.html

四、客户端

4.1、获取设备信息

uni.getPushClientId 获取客户端唯一的推送标识。

注意:这是一个异步的方法,且仅支持uni-push2.0;

OBJECT 参数说明

参数名

类型

必填

说明

success

Function

接口调用的回调函数,详见返回参数说明

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数

类型

说明

cid

String

个推客户端推送id,对应uni-id-device表的push_clientid

errMsg

String

错误描述

fail 返回参数说明

参数

类型

说明

errMsg

String

错误描述

常见报错:
getPushClientId:fail register fail: {\"errorCode\":1,\"errorMsg\":\"\"}
请检查:

  1. 当前应用是否已开通uni-push2.0 详情参考

  2. 客户端对应平台是否已启用uni-push2.0详情参考

  3. HBuilderX3.5.1 App平台vue3项目首次启动调用uni.getPushClientId 存在可能获取不到cid的问题,HBuilderX3.5.2修复了此问题,请升级。

     

示例代码:

uni.getPushClientId({
    success: (res) => {
      console.log(res.cid);
    },
    fail(err) {
      console.log(err)
    }
  })

4.2、监听推送消息

uni.onPushMessage(callback) 启动监听推送消息事件。

uni.onPushMessage((res) => {
   console.log('监听推送消息', res)
})
//收到消息内容
{
  "type":"click",
    "data":{
      "__UUID__":"androidPushMsgXXXXXX",
        "title":"tmgh",
          "appid":"__UNI__DXXXXX",
            "content":"c✨",
              "payload":{
                "timeMillis":"1686192721365"
              },
              "force_notification":"true"
    }
}

4.3、创建本地通知栏消息

uni.createPushMessage(OBJECT) 创建本地通知栏消息(HBuilderX 3.5.2起支持)

平台差异说明

App

H5

快应用

微信小程序

支付宝小程序

百度小程序

字节跳动小程序、飞书小程序

QQ小程序

快手小程序

京东小程序

x

x

x

x

x

x

x

x

x

OBJECT 参数说明

参数名

类型

必填

说明

title

string

推送消息的标题,在系统消息中心显示的通知消息标题,默认值为程序的名称。
Android - ALL (支持)
iOS - 5.0+ (不支持): 不支持设置消息的标题,固定为程序的名称。

content

string

消息显示的内容,在系统通知中心中显示的文本内容。

payload

string、Object

消息承载的数据,可根据业务逻辑自定义数据格式。

icon

string

推送消息的图标
本地图片地址,相对路径 - 相对于当前页面的host位置,如"a.jpg",注意当前页面为网络地址则不支持;绝对路径 - 系统绝对路径,如Android平台"/sdcard/logo.png",此类路径通常通过其它5+ API获取的;扩展相对路径URL(RelativeURL) - 以"_"开头的相对路径,如"_www/a.jpg";本地路径URL - 以“file://”开头,后面跟随系统绝对路径。
Android - 2.3+ (支持)
iOS - ALL (不支持): 不支持自定义图片,固定使用应用图标。

sound

string

'system' 'none'推送消息的提示音
显示消息时的播放的提示音,可取值:“system”-表示使用系统通知提示音;“none”-表示不使用提示音;默认值为“system”。
Android - 2.3+ (支持)
iOS - 5.1+ (支持): 当程序在前台运行时,提示音不生效。注:通常应该设置延迟时间,当程序切换到后台才创建本地推送消息时生效。

cover

boolean

是否覆盖上一次提示的消息
可取值true或false,true为覆盖,false不覆盖,默认为permission中设置的cover值
Android - ALL (支持)
iOS - 5.0+ (不支持): 不支持覆盖消息,只能创建新的消息。

delay

number

提示消息延迟显示的时间
当设备接收到推送消息后,可不立即显示,而是延迟一段时间显示,延迟时间单位为s,默认为0s,立即显示。

when

Date

消息上显示的提示时间
默认为当前时间,如果延迟显示则使用延时后显示消息的时间。
Android - ALL (支持)
iOS - 5.0+ (不支持): 不支持设定消息的显示时间,由系统自动管理消息的创建时间。

success

Function

接口调用成功的回调函数

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)


uni.createPushMessage({ title:
'自创标题', content: '自创内容', payload: {}, success: () => { console.log("自创推送成功") }, fail: () => { console.log("自创推送失败") } })
 

4.4、关闭消息监听

uni.offPushMessage(callback) 关闭推送消息监听事件 示例代码:

let callback = (res)=>{
  console.log(res)
}
//启动推送事件监听
uni.onPushMessage(callback);
//关闭推送事件监听
uni.offPushMessage(callback);

 

五、调试中 bug

 

前端同学最愁的就是按照官方文档写了,看着没有问题,但是推送就是不好,出现问题找不到解决办法愁死人。

无法触发推送事件,怎么解决?

plus.push.addEventListener("receive") 和 uni.onPushMessage 无法触发,需要透传消息,使用unipush 后台推送透传消息可以触发,但是自己平台的推送始终不执行,好气哦!

网上各种百度,解决办法五花八门的,最后还是在官方文档里找到解决办法,建议大家多看开发文档。

解决办法:

修改云函数中 force_notification 配置参数。

服务端执行推送时,传递参数force_notification:true,客户端就会自动创建“通知栏消息”(此时你监听不到消息内容),当用户点击通知栏消息后,APP才能监听到消息内容。文章来源地址https://www.toymoban.com/news/detail-517787.html

到了这里,关于聊天室(二)__ unipush 推送实现详细教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Django实现websocket聊天室

    WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器双向通信,即允许服务器主动发送信息给客户端。因此,在WebSocket中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输,客户端和服务器之间的数据交换变

    2023年04月23日
    浏览(53)
  • Java+Vue实现聊天室(WebSocket进阶-聊天记录)

    WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。 WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服

    2024年02月11日
    浏览(65)
  • 基于UDP实现的网络聊天室

    服务器: 客户端: 运行结果:

    2024年03月08日
    浏览(65)
  • LinuxC TCP实现简易聊天室

    目录 1.概述 1.1聊天室设计内容 2.系统设计 2.1系统功能设计 2.1.1用户管理 2.1.2聊天室管理 2.1.3聊天管理 2.2系统数据结构设计 2.3系统主要函数设计 3.系统实现 3.2功能模块的程序流程图及运行界面 3.2.1功能模块流程图  3.2.2运行界面 4.源代码 4.1客户端 4.2服务器 注:存在问题 1

    2024年02月09日
    浏览(41)
  • django websocket实现聊天室功能

    注意事项channel版本 django2.x 需要匹配安装 channels 2 django3.x 需要匹配安装 channels 3 Django 3.2.4 channels 3.0.3 Django 3.2.* channels 3.0.2 Django4.2 channles==3.0.5 是因为最新版channels默认不带daphne服务器 直接用命令 python manage.py runsever 默认运行的是wsgi ,修改,删除settings中的wsgi,都不能正确运

    2024年01月22日
    浏览(45)
  • SpringBoot与webSocket实现在线聊天室——实现私聊+群聊+聊天记录保存

    引用参考:原文章地址:https://blog.csdn.net/qq_41463655/article/details/92410518 在此基础上实现对聊天记录的保存。 代码地址:链接:https://pan.baidu.com/s/1IJFZDa4S_DF08773sKJWeA 提取码:jkui 思路:新建一个实体类用于保存聊天记录,在消息发送时,设置对象的各个值然后保存到数据库中。

    2024年02月02日
    浏览(57)
  • springboot+websocket实现简单的聊天室

    HTML HTML是创建和构造网页的标准标记语言。它使用一组标记标签描述网页上的内容结构。HTML文档由HTML元素的嵌套结构组成,每个元素由尖括号( )括起的标签表示。这些元素定义了网页的各个部分,如标题、段落、图像、链接、表单等。 JavaScript JavaScript是一种高级、解释性

    2024年01月21日
    浏览(59)
  • 基于springboot与websocket实现简易聊天室

    创建一个简单聊天室的HTML和JavaScript代码,匹配相应的css样式,这个聊天室将使用WebSocket技术,允许用户实时发送和接收消息。 1.1 html和js代码 通过new WebSocket(url)建立一个新的websocket连接。websocket连接建立之后使用websocket.onopen,websocket.onclose,websocket.onerror等方法实时监测we

    2024年02月01日
    浏览(56)
  • 基于java的聊天室系统设计与实现

    基于java的聊天室系统设计与实现 研究背景: 随着互联网技术的迅速发展和普及,在线聊天和实时通信成为人们日常交流的重要方式。聊天室系统作为实时通信的一种重要形式,具有广泛的应用场景,如远程教育、在线游戏、即时通讯、网络直播等。因此,设计和实现一个基

    2024年02月05日
    浏览(44)
  • websocket+elementui+vue实现简易聊天室

    搭建服务端环境 安装socket.io 服务端基于node,js的express框架生成,所以写成模块,引入至app.js中 其中,io.sockets.emit用于向所有建立连接的客户端发送信息,socket.broadcast.emit用于向除发送方之外的客户端发送信息。 客户端基于vue和elementui 进入聊天页面后,先判断用户是否登录,

    2024年04月25日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包