前言
时光荏苒,今天上到博客看着断更了的11月的博客,总感觉少了点什么,这么久没有写文章,无疑有一种断枝残柳的感觉;
博主最近一直在搞IM方面的业务,当然客户端主要是微信小程序,相信这个时候你一定有这个想法一闪而过:“微信本身都是一个即时沟通软件了,这么做不是多此一举吗?”,其原因在于如果两个用户不加好友那么就无法进行微信对话的,而小程序不同,只要用户访问进来我就可以与他发起对话,这样做主要是为了促进更进一步的沟通。
正文
首先我们需要进行WebSocket的会话连接,相关开发文档可以查阅微信官方(点我查看),这里我就不做基本的连接重连等相关Socket机制讲解,我们主要说说在小程序进行全局的消息监听与通知的一个思路与实现。
在这里我的思路是这样的:Socket连接对象放入到小程序App的全局Global数据中,当进入到页面的时候,引入封装好的mixins,然后进行通知的事件注册,然后引入相关通知的组件,就可以实现全局消息通知的这样一个需求,实际上是很简单的。
比如,我们先在mixins内封装一些基本方法:
//获取websocket连接 ws(){ return wepy.$instance.global.ws; }
下面是一个通知调用的方法,每个项目的业务逻辑不同,可做适当的调整
/** * 系统通知 * @param {String} content 通知消息内容 * @param {String} from 触发者名称 * @param {String} go 点击跳转至 * @param {String} type 通知类型 * @param {Integer} showtime 显示时长 */ wsNotify(content,from,go,type='chat',showtime=5){ if(this.wsData.wsTipsTimeoutEvent!=null){ clearTimeout(this.wsData.wsTipsTimeoutEvent) } let times = showtime * 1000; let timeoutCall = setTimeout(()=>{ this.wsData.tipShow = false; this.wsData.wsTipsTimeoutEvent = null; this.$apply(); },times); this.wsData = { tipShow:true,tipData:content,type:type,from:from,wsTipsTimeoutEvent:timeoutCall,go:go } wx.vibrateLong({}) //振动 this.$apply() }
这里我分享一个我封装的通知弹窗组件
<template> <view class="ws-notify {{ws.tipShow ? 'ws-notify-show':''}}"> <view class='ws-notify-body'> <van-row> <van-col @tap="goDetail" span='3'><i class='iconfont ico'></i></van-col> <van-col @tap="goDetail" span='20'> <view>{{ws.from}}</view> <view>{{ws.tipData}}</view> </van-col> <van-col span='1' @tap="close"><i class='iconfont ico-close'></i></van-col> </van-row> </view> </view> </template> <script> import wepy from 'wepy'; export default class WsNotify extends wepy.component { props = { ws:{ type:Object, twoWay: true } } methods = { close(){ this.ws.tipShow = false; clearTimeout(this.ws.wsTipsTimeoutEvent); this.ws.wsTipsTimeoutEvent = null; }, goDetail(){ wx.navigateTo({ url:this.ws.go }) } } } </script> <style lang="less"> .ws-notify{ position:fixed; top:20rpx; z-index:99999; width:100%; opacity: 0; -webkit-transform: translateZ(0) translateY(-100%); transition: all .4s ease-in-out; align-items: baseline; .ws-notify-body{ min-height: 70rpx; width:90%; border-radius: 15rpx; background-color: #fff; color:#495060; border:1rpx solid #495060; font-size: 26rpx; margin:0 auto; padding:20rpx; line-height: 40rpx; i.ico,i.ico-close{ color:#495060; font-size: 60rpx; line-height: 80rpx; } i.ico-close{ font-size: 30rpx; } } &.ws-notify-show{ -webkit-transform:translateZ(0) translateY(0); opacity:1; } } </style>
这里上面就是一些核心的基本功能,再进入一个小程序页面的时候,引入对应的组件并调用,然后在
onShow
的方法内进行事件监听注册,例如新消息的cmd为11,则为:<wsNotify :ws.sync="wsData" @close.user="wsOnCloseNotify"/>
this.ws().listen('11',(res)=>{ this.wsNotify('您有一条新的聊天信息,点我查看!',res.extras.username, '/pages/cards/chat?id='+res.from) })
到这一步,基本的功能就已经实现了,本文主要是讲解一个思路,其实现方法请根据项目的业务进行调整。
后记
2018年还剩下最后一周不到的时间,在这里提前恭祝大家新年快乐!
文章不错支持一下,非常喜欢