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;
}