workerman 之 联合 php后端及时推送消息给小程序

参考网址 https://blog.csdn.net/weixin_40221833/article/details/79611021

上面写的很好，代码直接能用

我要说的是，这个推送和我理解的推送不一样， 我想要的是新消息提醒样式，而不是手机上部跳出来的那种推送消息

所以，我下面介绍一下我怎么做的新消息提醒

其实还是样式问题，有新消息，显示红点 就好了 所以，我直接遍历的数据库消息，已读消息satus为 2，未读消息为 1，默认为 1

tp3.2

<?php namespace Wxapi\Controller; use Common\Controller\HomebaseController; use Think\Model; use Think\upload; // 微信未读消息 public function wxmsg($touid){ $chatlist_model = M('wxchatlist'); $posts = new Model(); $where['status'] = '1'; $where['touid'] = $touid; // 未读消息 ASC // $data = $chatlist_model->where($where)->order('date ASC')->group('uid')->select(); // order 和 group 不能同用 $d = $chatlist_model->where($where)->group('uid')->count(); // var_dump($d); $sql="SELECT * FROM (SELECT * FROM `red_wxchatlist` WHERE `status`= 1 AND `touid`= ".$touid." ORDER BY `date` DESC) r GROUP BY r.uid "; $data = $posts->query($sql); $data[0]['num'] = $d; // var_dump($data); // 已有消息 $wh['status'] = '2'; $wh['touid'] = $touid; $da = $chatlist_model->where($wh)->group('uid')->count(); // var_dump($da); $sql22="SELECT * FROM (SELECT * FROM `red_wxchatlist` WHERE `status`= 2 AND `touid`= ".$touid." ORDER BY `date` DESC) r GROUP BY r.uid "; $data22 = $posts->query($sql22); $data22[0]['num'] = $da; // var_dump($data22); // 页面上，需要，发送过来消息人的 头像，名字，内容，时间 // 之前聊天的记录也要有，就要查，status=2的 // 如果是同1个人发来的，就只显示1个对话框 if(empty($data) && empty($data22)){ $data=array( "status"=>0, "message"=>"数据异常", ); $this->ajaxReturn($data,'JSON'); }else{ $info = array( "status"=>1, 'shuju'=>$data, 'history'=>$data22 ); $this->ajaxReturn($info,'JSON'); } }

小程序中

wxml

<view class="container"> <!--主体--> <view class="main"> <view class="item" wx:for="{{newslist}}" wx:key="key" data-uid="{{item.uid}}" bindtap="linkchat"> <view class="round-click"> <view data-type="{{currentIndex}}" >{{item.num}}</view> </view> <view class="item-avatar"><image src="{{item.avatarurl}}"></image></view> <view class="item-text"> <view class="text-row"> <view class="row-name">{{item.uid}}</view> <view class="row-time">{{item.date}}</view> </view> <view class="text-msg text-allipsis">{{item.content}}</view> </view> <view class="item-oth"></view> </view> <view class="item" wx:for="{{histnews}}" wx:key="key" data-uid="{{item.uid}}" bindtap="linkchat"> <view class="round-click"> <view data-type="{{currentIndex}}" >{{item.num}}</view> </view> <view class="item-avatar"><image src="{{item.avatarurl}}"></image></view> <view class="item-text"> <view class="text-row"> <view class="row-name">{{item.uid}}</view> <view class="row-time">{{item.date}}</view> </view> <view class="text-msg text-allipsis">{{item.content}}</view> </view> <view class="item-oth"></view> </view> </view>

js

// pages/chat/message/message.js const app = getApp(); var utils = require('../../../utils/util.js'); var socketOpen = false; var frameBuffer_Data, session, SocketTask; // var url = 'ws://localhost:8000'; // 本地 var url = 'ws://192.168.2.105:5678'; // 这样就可以在体验版聊天了 Page({ data: { userInfo: '', scrollTop: 0, newslist: [], // 页面的消息列表 histnews: [], session_id: '', tochat: '', uid: 1, num: 0, fabuimg: 'https://hs.com/public/images/wechat/fabu.png', }, // 页面加载 onLoad: function (options) { var that = this; var sessionid = wx.getStorageSync('session_id'); if (wx.getStorageSync('session_id')) { that.setData({ session_id: sessionid, tochat: options.tochat, }) } that.jiazai(); // 请求数据 }, // 请求聊天列表 jiazai: function () { var that = this; console.log('走到jiazai'); // 如果是已读消息，修改状态为2，默认是1，未读消息 // 请求数据库，查，touid 是自己的消息，读取status为1的数据的 content 和 uid wx.request({ url: 'https://hs.com/Wxapi/Index/wxmsg', data: { touid: that.data.session_id }, header: { 'content-type': 'application/json' // 默认值 }, success: function (res) { delete res.data.referer; delete res.data.state; // console.log(res.data); var content = res.data.shuju; // console.log(content); if (!content) { content = []; } var content2 = res.data.history; // console.log(content2); if (!content2) { content2 = []; } that.setData({ newslist: res.data.shuju, histnews: res.data.history }); } }) }, // 跳聊天页面 linkchat: function (event) { // 携带应该是想要对话的用户的标识 // var tochat = this.data.content.sessionid; // 想要对话人的 uid var tochat = event.currentTarget.dataset.uid; var url = "/pages/chat/chat-detail?tochat=" + tochat; console.log(url); wx.navigateTo({ url: url }) }, // 上面的代码就已经能实现效果了，下面是请求websocket,其实根本用不到 // 发送数据 sendmsg: function(){ var data = { content: '我喜欢你', uid: '326', }; console.log('走到socketopen111'); if (socketOpen) { // 没有走到这 sendSocketMessage(data) // 如果打开了socket就发送数据给服务器 console.log('走到socketopen222'); } }, onShow: function (e) { if (!socketOpen) { this.webSocket() } }, // 页面加载完成 onReady: function () { var that = this; SocketTask.onOpen(res => { socketOpen = true; console.log('监听 WebSocket 连接打开事件。', res) console.log('WebSocket连接已打开！') // send: 'login', // 下面应该携带的是，发送消息人的uid,我是收到人， // 如果是已读消息，修改状态为2，默认是1，未读消息 // var data1 = { // send: 'send_message', // content: '我好爱你', // uid: that.data.session_id // } // that.sendSocketMessage({ // data: JSON.stringify(data1), //将 JavaScript 值转换为 JSON 字符串 // }) }) SocketTask.onClose(onClose => { console.log('监听 WebSocket 连接关闭事件。', onClose) socketOpen = false; this.webSocket() }) SocketTask.onError(onError => { console.log('监听 WebSocket 错误。错误信息', onError) socketOpen = false }) // 监控收到服务器内容 SocketTask.onMessage(onMessage => { console.log('走到服务器返回数据'); // 下面打开就报错,因为没返回值 // console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息', JSON.parse(onMessage.data)) // var onMessage_data = JSON.parse(onMessage.data); }) }, // 给服务端发送消息 sendSocketMessage: function (msg) { console.log('走到wx.sendSocketMessage'); var that = this; console.log('通过 WebSocket 连接发送数据', JSON.stringify(msg)) // msg 发送的数据 SocketTask.send({ data: JSON.stringify(msg) }, function (res) { util.showModal("已发送"); console.log('已发送'); }) }, webSocket: function () { // 创建Socket,链接 // data: 'data', SocketTask = wx.connectSocket({ url: url, header: { 'content-type': 'application/json' }, method: 'post', success: function (res) { console.log('WebSocket连接创建', res) }, fail: function (err) { wx.showToast({ title: '网络异常！', }) console.log(err) }, }) }, onHide: function () { SocketTask.close(function (close) { console.log('关闭 WebSocket 连接。', close) }) }, // 获取hei的id节点然后屏幕焦点调转到这个节点 ，这是第二个页面的写法 bottom: function () { var that = this; this.setData({ scrollTop: 1000000 }) }, })

wxss

/* pages/message/message.wxss */ .container{ background-color:white; } .main{ position:relative; width:100%; } .main .item{ width:100%; height:120rpx; background-color:#F7F7F7; margin-top:2rpx; padding:10rpx 0; } .main .item .item-avatar{ width:20%; height:100rpx; line-height:100rpx; float:left; } .main .item .item-avatar image{ width:80rpx; height:80rpx; vertical-align:middle; margin-left: 40rpx; border-radius: 10rpx; } .main .item .item-text{ width:78%; height:100rpx; float:left; } .main .item .item-text .text-row{ height:50rpx; font-size:35rpx; line-height:50rpx; overflow: hidden; } .main .item .item-text .text-row .row-name{ float:left; } .main .item .item-text .text-row .row-time{ float:right; color:#848484; font-size:25rpx; } .main .item .item-text .text-msg{ height:50rpx; line-height: 50rpx; font-size:30rpx; color:#848484 ; overflow: hidden; } .fiexd{ position:fixed; } .text-allipsis{ white-space:nowrap; text-overflow: ellipsis; } /* 下面是提醒样式 */ .round-click{ height: 40rpx; width: 40rpx; /* background-color: #d92a2a; */ background-color: #e60808; border-radius: 100%; position: fixed; /* bottom: 150rpx; */ /* right: 20rpx; */ left: 80rpx; display: flex; align-items: center; justify-content: center; z-index: 9; } .round-click navigator{ font-size: 32rpx; max-width: 80rpx; color: #fff; text-align: center; } .round-click view{ font-size: 32rpx; max-width: 80rpx; color: #fff; text-align:center; }