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