前端ws连接,建立连接时设置未读数badge

auth-service/src/test/java/io/github/nnkwrik/authservice/jwt/GenerateToken.java

@@ -32,9 +32,9 @@ public class GenerateToken {
      */
     @Test
     public void generateToken() throws IllegalAccessException {
-        String openId = "3";
-        String nickName = "测试用户";
-        String avatarUrl = "https://avatars2.githubusercontent.com/u/29662114?s=460&v=4";
+        String openId = "1";
+        String nickName = "测试用户1";
+        String avatarUrl = "https://4.bp.blogspot.com/-gKPdnJWscyI/VCIkF3Po4DI/AAAAAAAAmjo/fAKkTMyf8hM/s170/monster01.png";
 
         JWTUser jwtUser = new JWTUser(openId, nickName, avatarUrl);
         String token = creator.create(jwtUser);
@@ -59,6 +59,20 @@ public class GenerateToken {
         System.out.println("\n=========================================================");
     }
 
+    @Test
+    public void generateNoExpiredToken() throws IllegalAccessException {
+        String openId = "1";
+        String nickName = "测试用户1";
+        String avatarUrl = "https://4.bp.blogspot.com/-gKPdnJWscyI/VCIkF3Po4DI/AAAAAAAAmjo/fAKkTMyf8hM/s170/monster01.png";
+
+        JWTUser jwtUser = new JWTUser(openId, nickName, avatarUrl);
+        String token = createNoExpiredToken(jwtUser);
+
+        System.out.println("==================== 生成的Token =========================\n");
+        System.out.println(token);
+        System.out.println("\n=========================================================");
+    }
+
 
     private String createExpiredToken(JWTUser jwtUser) throws IllegalAccessException {
         Algorithm algorithm = Algorithm.RSA256(creator.keyProvider);
@@ -78,4 +92,21 @@ public class GenerateToken {
 
         return "Bearer " + token;
     }
+
+    private String createNoExpiredToken(JWTUser jwtUser) throws IllegalAccessException {
+        Algorithm algorithm = Algorithm.RSA256(creator.keyProvider);
+
+        JWTCreator.Builder builder = JWT.create();
+
+        //通过反射构造token字符串
+        for (Field field : jwtUser.getClass().getDeclaredFields()) {
+            field.setAccessible(true);
+            String value = (String) field.get(jwtUser);
+            String name = field.getName();
+            builder.withClaim(name, value);
+        }
+        String token = builder.sign(algorithm);
+
+        return "Bearer " + token;
+    }
 }

im-service/src/main/java/io/github/nnkwrik/imservice/constant/MessageType.java

@@ -11,4 +11,6 @@ public class MessageType {
     public static final int USER_MESSAGE = 1;
 
     public static final int ESTABLISH_CHAT = 2;
+
+    public static final int UNREAD_NUM = 3;
 }

im-service/src/main/java/io/github/nnkwrik/imservice/controller/ChatController.java

@@ -37,18 +37,6 @@ public class ChatController {
     @Autowired
     private FormService formService;
 
-    //用于打开小程序时
-    @GetMapping("/chat/unreadCount")
-    public Response<Integer> getUnreadCount(@JWT JWTUser user) {
-
-        if (user == null) {
-            return Response.ok(0);
-        }
-        int unreadCount = indexService.getUnreadCount(user.getOpenId());
-        log.info("已登录用户查询未读消息个数, {} 条未读信息.用户id = {},用户昵称 = {}", unreadCount, user.getOpenId(), user.getNickName());
-
-        return Response.ok(unreadCount);
-    }
 
     //打开消息一览时
     @GetMapping("/chat/index")

im-service/src/main/java/io/github/nnkwrik/imservice/service/IndexService.java

@@ -12,5 +12,4 @@ import java.util.List;
 public interface IndexService {
     List<ChatIndex> showIndex(String userId, int size, Date offsetTime);
 
-    int getUnreadCount(String userId);
 }

im-service/src/main/java/io/github/nnkwrik/imservice/service/WebSocketService.java

@@ -1,12 +1,13 @@
 package io.github.nnkwrik.imservice.service;
 
-import io.github.nnkwrik.imservice.model.vo.WsMessage;
-
 /**
  * @author nnkwrik
  * @date 18/12/05 12:28
  */
 public interface WebSocketService {
+
+    int getUnreadCount(String userId);
+
     void OnMessage(String senderId, String message);
 
 }

im-service/src/main/java/io/github/nnkwrik/imservice/service/impl/IndexServiceImpl.java

@@ -82,22 +82,6 @@ public class IndexServiceImpl implements IndexService {
         return resultVoList;
     }
 
-    @Override
-    public int getUnreadCount(String userId) {
-        //去查userId参与的chat的id
-        List chatIdList = chatMapper.getChatIdsByUser(userId);
-        List<List<WsMessage>> lastChatList = redisClient.multiGet(chatIdList);
-
-        //过滤自己发送的
-        int unreadCount = lastChatList.stream()
-                .filter(chat -> !chat.get(0).getSenderId().equals(userId))
-                .mapToInt(List::size)
-                .sum();
-
-        return unreadCount;
-
-    }
-
 
     private List<WsMessage> getDisplayUnread(List<List<WsMessage>> unreadMessage,
                                              Map<Integer, Integer> unreadCount,

im-service/src/main/java/io/github/nnkwrik/imservice/service/impl/WebSocketServiceImpl.java

@@ -19,6 +19,7 @@ import org.springframework.util.StringUtils;
 import java.util.ArrayList;
 import java.util.Date;
 import java.util.List;
+import java.util.stream.Collectors;
 
 /**
  * @author nnkwrik
@@ -39,6 +40,23 @@ public class WebSocketServiceImpl implements WebSocketService {
     @Autowired
     private FormService formService;
 
+    @Override
+    public int getUnreadCount(String userId) {
+        //去查userId参与的chat的id
+        List<Integer> chatIdList = chatMapper.getChatIdsByUser(userId);
+        List<List<WsMessage>> lastChatList = redisClient.multiGet(chatIdList.stream()
+                .map(id -> id + "")
+                .collect(Collectors.toList()));
+
+        //过滤自己发送的
+        int unreadCount = lastChatList.stream()
+                .filter(chat -> chat != null && !chat.get(0).getSenderId().equals(userId))
+                .mapToInt(List::size)
+                .sum();
+
+        return unreadCount;
+    }
+
     @Override
     public void OnMessage(String senderId, String rawData) {
         WsMessage message = null;

im-service/src/main/java/io/github/nnkwrik/imservice/websocket/ChatEndpoint.java

@@ -5,6 +5,8 @@ import io.github.nnkwrik.common.dto.JWTUser;
 import io.github.nnkwrik.common.dto.Response;
 import io.github.nnkwrik.common.token.TokenSolver;
 import io.github.nnkwrik.common.util.JsonUtil;
+import io.github.nnkwrik.imservice.constant.MessageType;
+import io.github.nnkwrik.imservice.model.vo.WsMessage;
 import io.github.nnkwrik.imservice.service.WebSocketService;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -15,6 +17,7 @@ import javax.websocket.*;
 import javax.websocket.server.PathParam;
 import javax.websocket.server.ServerEndpoint;
 import java.io.IOException;
+import java.util.Date;
 import java.util.concurrent.ConcurrentHashMap;
 import java.util.concurrent.ConcurrentMap;
 
@@ -47,9 +50,15 @@ public class ChatEndpoint {
 //            return;
 //        }
         sessionMap.put(openId, session);
-//        log.info("【websocket消息】有新的连接, openId = [{}],用户昵称= [{}]", openId, user.getNickName());
-        log.info("【websocket消息】有新的连接, openId = [{}],用户昵称= [{}]", openId);
-
+//        log.info("【websocket消息】有新的连接, openId = [{}],用户昵称= [{}],未读消息数={}", openId, user.getNickName(),);
+        int unreadCount = webSocketService.getUnreadCount(openId);
+        log.info("【websocket消息】有新的连接, openId = [{}],用户昵称= [{}],未读消息数={}", openId, "", unreadCount);
+
+        WsMessage wsMessage = new WsMessage();
+        wsMessage.setMessageType(MessageType.UNREAD_NUM);
+        wsMessage.setMessageBody(unreadCount + "");
+        wsMessage.setSendTime(new Date());
+        sendMessage(openId, Response.ok(wsMessage));
     }
 
     @OnClose

wx-front/app.js

@@ -2,8 +2,10 @@ var util = require('./utils/util.js');
 var api = require('./config/api.js');
 var user = require('./services/user.js');
 
+var SocketTask
+
 App({
-  onLaunch: function () {
+  onLaunch: function() {
     //!!生产环境专用测试数据
     wx.setStorageSync('userInfo', this.testData.userInfo);
     wx.setStorageSync('token', this.testData.token);
@@ -12,17 +14,83 @@ App({
     // wx.setStorageSync('token', null);
 
     //获取用户的登录信息
-    // user.checkLogin().then(res => {
-    //   console.log('app login')
-    //   this.globalData.userInfo = wx.getStorageSync('userInfo');
-    //   this.globalData.token = wx.getStorageSync('token');
-    // }).catch(() => {
-      
-    // });
+    user.checkLogin().then(res => {
+      console.log('app login')
+      this.globalData.userInfo = wx.getStorageSync('userInfo');
+      this.globalData.token = wx.getStorageSync('token');
+      this.socketTask();
+      this.wsConnect();
+    }).catch(() => {
+
+    });
+
+
+  },
+  socketTask: function() {
+    var that = this;
+    SocketTask.onOpen(res => {
+      that.globalData.socketOpen = true;
+      console.log('监听 WebSocket 连接打开事件。', res)
+    })
+    SocketTask.onClose(onClose => {
+      console.log('监听 WebSocket 连接关闭事件。', onClose)
+      that.globalData.socketOpen = false;
+      this.webSocket()
+    })
+    SocketTask.onError(onError => {
+      console.log('监听 WebSocket 错误。错误信息', onError)
+      that.globalData.socketOpen = false
+    })
+    SocketTask.onMessage(onMessage => {
+      console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息', JSON.parse(onMessage.data))
+    })
+  },
+  wsConnect: function() {
+    // 创建Socket
+    let that = this
+    SocketTask = wx.connectSocket({
+      url: api.ChatWs + '/' + this.globalData.userInfo.openId,
+      data: 'data',
+      header: {
+        'content-type': 'application/json'
+      },
+      method: 'post',
+      success: function(res) {
+        console.log('WebSocket连接创建', res)
+        that.wsOnMessage();
+      },
+      fail: function(err) {
+        wx.showToast({
+          title: '网络异常！',
+        })
+        console.log(err)
+      },
+    })
   },
+  wsOnMessage:function(){
+    wx.onSocketMessage(onMessage => {
+      console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息', JSON.parse(onMessage.data))
+      var res = JSON.parse(onMessage.data)
+      if (res.errno === 0) {
+        console.log(res.data)
+        if (res.data.messageType == 3) {
+          if (res.data.messageBody != 0) {
+            wx.setTabBarBadge({
+              index: 3,
+              text: res.data.messageBody
+            })
+          }
+        }
+      } else {
+        console.log(res)
+      }
+
+    })
+  },
+
+
+
 
-  
-  
   globalData: {
     userInfo: {
       openId: '',
@@ -30,6 +98,7 @@ App({
       avatarUrl: 'https://i.postimg.cc/RVbDV5fN/anonymous.png'
     },
     token: '',
+    socketOpen: false
   },
   testData: {
     userInfo: {
@@ -37,9 +106,10 @@ App({
       nickName: '测试用户1',
       avatarUrl: 'https://4.bp.blogspot.com/-gKPdnJWscyI/VCIkF3Po4DI/AAAAAAAAmjo/fAKkTMyf8hM/s170/monster01.png'
     },
-    token: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdmF0YXJVcmwiOiJodHRwczovLzQuYnAuYmxvZ3Nwb3QuY29tLy1nS1BkbkpXc2N5SS9WQ0lrRjNQbzRESS9BQUFBQUFBQW1qby9mQUtrVE15ZjhoTS9zMTcwL21vbnN0ZXIwMS5wbmciLCJvcGVuSWQiOiIxIiwibmlja05hbWUiOiLmtYvor5XnlKjmiLcxIiwiZXhwIjoxNTQ0NDI1MzY1fQ.ZsuZLiaShOEFNZEeVYFtF7u568-ykyX3jXuznBgfnxo_G70TlQjALtHdkIZo8c-L6iSYGu45CN7Qwhs8_76l_C6dkwh8p-ncT1fDdVavsiTnqMY2oj_HqHR8hA2jMnB8QteH066F5IQihqcpAcFj4l_nZeBZ-zRAQNE9t3ufnD1qVCrOw9nRO7ywMunMUEqf0AGeRl3k2SWiShIRxuZsy2x5Iacu3CsLL1W9K1caA-tzydC4wrfwPwOdp1dlBNb0Fmo8jO3yR8rKojrwC61kOTnTB-YCC56cb_fUM6LiPrh6zFq6F3HSvYfXSha1s0JJom3lX4ycM5OwDcFBBh4EHQ',
+    token: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdmF0YXJVcmwiOiJodHRwczovLzQuYnAuYmxvZ3Nwb3QuY29tLy1nS1BkbkpXc2N5SS9WQ0lrRjNQbzRESS9BQUFBQUFBQW1qby9mQUtrVE15ZjhoTS9zMTcwL21vbnN0ZXIwMS5wbmciLCJvcGVuSWQiOiIxIiwibmlja05hbWUiOiLmtYvor5XnlKjmiLcxIn0.NH3ISj2Fkircr8oB_w8-lZmf3QPt2tEOPx6Xrc-Bt8HAFu1oZIYOBYaevl8PS1xoaKkf4-8TBL2Jfx5E_uSbbkYj6WD5whHoWPy264AC3qP6ddIYFPDt3w5Ya8-FEZ26he6_mTSr0ceX-rMoFl_yiBSqoU0_H4XNAewsrTK8x3ow9qBI26eQlLDxHsZE-R3pA5sUm1IQEuV-pWGFgw6STNedoWJwX9Vq_SS4LnjOjmUZxI_xH3kPT38UAb-tvL-cM1_9XioP6H0G_9v4EhfDvnKZpmVXF4_qVzPy1VL_2VbTQr2AMoIqzP_FBSsCq2l6keP_BF6cnICJmGkqY3sLqw',
+    socketOpen: false
   },
-  post:{
+  post: {
     cate: {
       id: 0,
       name: ''

wx-front/config/api.js

@@ -1,5 +1,6 @@
 // const ApiRootUrl = 'https://5d876383.ngrok.io/';
 const ApiRootUrl = 'http://127.0.0.1:8805/';
+const WebSocktUrl = 'ws://localhost:8805/'
 
 module.exports = {
   IndexUrl: ApiRootUrl + 'index/index', //首页数据接口
@@ -26,6 +27,7 @@ module.exports = {
 
   ChatIndex: ApiRootUrl + 'chat/index', //消息一览
   ChatForm: ApiRootUrl + 'chat/form', //消息框
+  ChatWs: WebSocktUrl+'ws',  //消息WebSocket连接
 
   CartList: ApiRootUrl + 'cart/index', //获取购物车的数据
   CartAdd: ApiRootUrl + 'cart/add', // 添加商品到购物车

wx-front/pages/chat/chatForm/chatForm.js

@@ -66,15 +66,6 @@ Page({
             title: that.data.otherSide.nickName
           })
 
-          // that.culScroll();   
-          // setTimeout(function () {
-          //   that.setData({
-          //     scrollTop: 5000,
-          //     scrollHeight: that.data.newScrollHeight
-          //   })
-
-          // }, 100);
-
           let _this = that
           that.getScrollHeight().then((res) => {
             var scroll = res - _this.data.scrollHeight
@@ -84,25 +75,9 @@ Page({
             })
           })
 
-
         } else {
-          console.log("加载了么")
-          // that.queryMultipleNodes();   
-          // setTimeout(function() {
-          //   var scroll = that.data.newScrollHeight - that.data.scrollHeight
-          //   console.log("加载了么: scrollTop " + scroll)
-          //   console.log("加载了么: newScrollHeight " + that.data.newScrollHeight)
-          //   console.log("加载了么: scrollHeight " + that.data.scrollHeight)
-          //   that.setData({
-          //     scrollTop: scroll,
-          //     scrollHeight: that.data.newScrollHeight,
-          //   })
-
-
-          // }, 100);
-
+          //重新设置scroll,scrollTop = 之前的scrollHeigth - 加入了数据后的scrollHeigth
           let _this=that
-   
           that.getScrollHeight().then((res) => {
             var scroll = res - _this.data.scrollHeight
             _this.setData({
@@ -111,28 +86,12 @@ Page({
             })
           })
 
-
         }
       } else {
         console.log(res)
       }
     })
   },
-  culScroll: function() {
-    let that = this
-
-    var query = wx.createSelectorQuery()
-    query.select('#hei').boundingClientRect()
-    query.selectViewport().scrollOffset()
-    query.exec(function(res) {
-      console.log("同步设置newScrollHeight" + res[0].top)
-      that.setData({
-        newScrollHeight: res[0].top
-      })
-
-    })
-
-  },
   toGoods: function(event) {
     let goodsId = event.target.dataset.id;
     wx.navigateTo({
@@ -145,6 +104,19 @@ Page({
       this.getHistory()
     }
   },
+  getScrollHeight: function () {
+    let that = this
+    return new Promise(function (resolve, reject) {
+      var query = wx.createSelectorQuery()
+      //#hei是位于scroll最低端的元素,求它离scroll顶部的距离,得出ScrollHeight
+      query.select('#hei').boundingClientRect()
+      query.selectViewport().scrollOffset()
+      query.exec(function (res) {
+        console.log("异步设置ScrollHeight" + res[0].top)
+        resolve(res[0].top);
+      })
+    });
+  },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
@@ -194,18 +166,6 @@ Page({
   onShareAppMessage: function() {
 
   },
-  getScrollHeight: function() {
-    let that = this
-    return new Promise(function(resolve, reject) {
-      var query = wx.createSelectorQuery()
-      query.select('#hei').boundingClientRect()
-      query.selectViewport().scrollOffset()
-      query.exec(function(res) {
-        console.log("异步设置newScrollHeight" + res[0].top)
-        resolve(res[0].top);
-      })
-    });
 
-  }
 
 })

wx-front/pages/index/index.js

@@ -62,10 +62,7 @@ Page({
     });
   },
   onLoad: function(options) {
-    // wx.setTabBarBadge({
-    //   index: 3,
-    //   text: '1'
-    // })
+
     this.getIndexData();
 
   },