當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

（eblog）8、消息异步通知、细节调整

發(fā)布時(shí)間：2023/12/20 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了（eblog）8、消息异步通知、细节调整小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

小Hub領(lǐng)讀：

繼續(xù)我們的eblog，今天來完成博客文章收藏，用戶中心的設(shè)置！

項(xiàng)目名稱：eblog

項(xiàng)目 Git 倉庫：https://github.com/MarkerHub/eblog（給個(gè) star 支持哈）

項(xiàng)目演示地址：https://markerhub.com:8082

前幾篇項(xiàng)目講解文章：

1、（eblog）Github 上最值得學(xué)習(xí)的 Springboot 開源博客項(xiàng)目！

2、（eblog）小 Hub 手把手教你如何從 0 搭建一個(gè)開源項(xiàng)目架構(gòu)

3、（eblog）整合Redis，以及項(xiàng)目優(yōu)雅的異常處理與返回結(jié)果封裝

4、（eblog）用Redis的zset有序集合實(shí)現(xiàn)一個(gè)本周熱議功能

5、（eblog）自定義Freemaker標(biāo)簽實(shí)現(xiàn)博客首頁數(shù)據(jù)填充

1、細(xì)節(jié)調(diào)整

這一次作業(yè)，我們來修復(fù)一下bug，還有一些細(xì)節(jié)調(diào)整，因?yàn)椴┛偷墓δ芷鋵?shí)不多，業(yè)務(wù)邏輯也不復(fù)雜，后面我們還有搜索、群聊等功能，都是大模塊。

文章收藏

文章收藏的js其實(shí)已經(jīng)寫好的了，只是有些條件沒有觸發(fā)而已，是什么條件呢，我們先來找到收藏的js先：

static/res/mods/jie.js

可以看到什么觸發(fā)加載收藏的條件有兩個(gè)：

是否有id為LAY_jieAdmin的元素
layui.cache.user.uid是否為-1

LAY_jieAdmin是為了限定只有文章詳情頁才加載這個(gè)js，而其他頁面不需要；那layui.cache.user.uid是哪里設(shè)置的呢？大家還記得我們一開始給html分模塊的時(shí)候嗎，我們在layout.ftl宏中有一段js，原本uid的值就是-1，所以我們需要把登錄之后的值附上去。

templates/inc/layout.ftl

熟系freemarker語法的同學(xué)應(yīng)該都懂${profile.id!'-1'}是啥意思了，！后面表示當(dāng)值為空的默認(rèn)值。好，改好了之后刷新一下，你會發(fā)現(xiàn)有個(gè)彈窗提示"請求異常，請重試"，我們暫時(shí)先不管，先把收藏功能搞定先，看看是不是收藏功能controller還沒有導(dǎo)致的。

從上圖可以看出，我已經(jīng)把查看是否收藏功能的鏈接改了一下

/collection/find/

功能代碼其實(shí)很簡單，就從UserCollection表中查詢是否有記錄就行了，如果有表明已經(jīng)收藏了，js會渲染出取消收藏的按鈕，如果沒有記錄，就會渲染收藏的按鈕。

com.example.controller.PostController

@ResponseBody @PostMapping("/collection/find/") public Result collectionFind(Long cid) {int count = userCollectionService.count(new QueryWrapper<UserCollection>().eq("post_id", cid).eq("user_id", getProfileId()));return Result.succ(MapUtil.of("collection", count > 0)); }

根據(jù)js，我直接返回的是data中放一個(gè)參數(shù)collection是否為true就行了。渲染效果如下：?

然后點(diǎn)擊按鈕，發(fā)現(xiàn)有兩個(gè)鏈接（我改了一下鏈接前綴）：

/collection/add/
/collection/remove/

分別代表這收藏和取消收藏，所以我們分別寫這兩個(gè)controller，注意都是ajax請求來的。收藏的邏輯也比較簡單，首先判斷一下是否已經(jīng)收藏過了，已經(jīng)收藏就返回提示已經(jīng)收藏，未收藏就添加一天記錄即可。

com.example.controller.PostController

@ResponseBody @PostMapping("/collection/add/") public Result collectionAdd(Long cid) {Post post = postService.getById(cid);Assert.isTrue(post != null, "該帖子已被刪除");int count = userCollectionService.count(new QueryWrapper<UserCollection>().eq("post_id", cid).eq("user_id", getProfileId()));if(count > 0) {return Result.fail("你已經(jīng)收藏");}UserCollection collection = new UserCollection();collection.setUserId(getProfileId());collection.setCreated(new Date());collection.setModified(new Date());collection.setPostId(post.getId());collection.setPostUserId(post.getUserId());userCollectionService.save(collection);return Result.succ(MapUtil.of("collection", true)); }

com.example.controller.PostController

取消收藏的邏輯：刪除一條記錄即可

@ResponseBody @PostMapping("/collection/remove/") public Result collectionRemove(Long cid) {Post post = postService.getById(Long.valueOf(cid));Assert.isTrue(post != null, "該帖子已被刪除");boolean hasRemove = userCollectionService.remove(new QueryWrapper<UserCollection>().eq("post_id", cid).eq("user_id", getProfileId()));return Result.succ(hasRemove); }

ok，收藏設(shè)計(jì)到的3個(gè)方法已經(jīng)開發(fā)完畢，點(diǎn)擊文章詳情頁的收藏和取消收藏，都能正常執(zhí)行代碼！無bug~

消息未讀

到了這時(shí)候，你發(fā)現(xiàn)，刷新頁面之后，還是有彈窗提示，這是啥問題？瀏覽器打開F12，切換到Network標(biāo)簽，因?yàn)槲覀儾孪霊?yīng)該是一些異步請求出了異常，所以觸發(fā)了彈窗提示。接下來我們就要找到這個(gè)請求，Network下，我們再點(diǎn)擊XHR，因?yàn)檫@表示是發(fā)起的異步請求的鏈接。從這里我們就看到了一個(gè)nums/的請求是404，具體的請求其實(shí)是：http://localhost:8080/message/nums/，

然后我們再全局搜索/message/nums找到發(fā)起這個(gè)異步請求的js地方：

所以我們確定了這個(gè)彈窗應(yīng)該就是這引起的了。所以我們?nèi)懸幌逻@個(gè)方法。這是新消息通知，我們之前在用戶中心弄過一個(gè)我的消息，但是好像沒有狀態(tài)（已讀和未讀），所以我需要在UserMessage上添加一個(gè)status字段標(biāo)識已讀和未讀。記得數(shù)據(jù)庫要添加字段。

com.example.entity.UserMessage

/*** 狀態(tài)：0未讀，1已讀*/ private Integer status;

然后我們再查下當(dāng)前用戶的狀態(tài)未0的消息數(shù)量出來，就是新消息通知的數(shù)量了。

com.example.controller.IndexController

@ResponseBody @PostMapping("/message/nums/") public Object messageNums() throws IOException {int count = userMessageService.count(new QueryWrapper<UserMessage>().eq("to_user_id", getProfileId()).eq("status", 0));return MapUtil.builder().put("status", 0).put("count", count).build(); }

返回值是啥我是根據(jù)js推算出來的，js需要啥結(jié)果我就返回啥結(jié)果。重新運(yùn)行代碼之后，我們發(fā)現(xiàn)彈窗沒有了，頁面展示效果如下：?

消息通知

至此，新消息通知已經(jīng)ok，接下來我們搞一個(gè)高大上一點(diǎn)的功能。我們刷微博簡書頭條等網(wǎng)站的時(shí)候，如果收到消息通知，一般來說不用我們刷新頁面，而是實(shí)時(shí)給我們展示有消息來了，會突然有個(gè)新消息通知的圖標(biāo)提示我們，這是怎么做到的呢，結(jié)合我們之前學(xué)過的知識。我們可以找到幾種方案來實(shí)現(xiàn)這個(gè)功能：

ajax定時(shí)加載刷新
websocket雙工通訊
長鏈接

我們課程中有節(jié)課是專門講解websocket的，接下來我們就使用這個(gè)技術(shù)來實(shí)現(xiàn)這個(gè)功能。

同學(xué)們可以去回顧一下websocket的知識：

https://gitee.com/lv-success/git-third/tree/master/course-15-websocket/springboot-websocket

上面是一個(gè)springboot集成ws的demo，接下來我們安裝這個(gè)例子的步驟把ws集成到我們現(xiàn)有的項(xiàng)目里面。

第一步：導(dǎo)入jar包

pom.xml

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency>

第二步：編寫ws配置

com.example.config.WebSocketConfig

@Configuration @EnableWebSocketMessageBroker//注解表示開啟使用STOMP協(xié)議來傳輸基于代理的消息，Broker就是代理的意思。 public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {/**** 注冊 Stomp的端點(diǎn)* addEndpoint：添加STOMP協(xié)議的端點(diǎn)。提供WebSocket或SockJS客戶端訪問的地址* withSockJS：使用SockJS協(xié)議* @param registry*/public void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/websocket").withSockJS();}/*** 配置消息代理* 啟動Broker，消息的發(fā)送的地址符合配置的前綴來的消息才發(fā)送到這個(gè)broker*/public void configureMessageBroker(MessageBrokerRegistry registry) {registry.enableSimpleBroker("/user/", "/topic");//推送消息前綴registry.setApplicationDestinationPrefixes("/app");} }

我們來解析一下這是啥意思，首先@EnableWebSocketMessageBroker，springboot的手動配置大家還記得吧？這個(gè)也是開啟ws消息代理，然后繼承WebSocketMessageBrokerConfigurer重寫registerStompEndpoints和configureMessageBroker方法，registerStompEndpoints方法是注冊端點(diǎn)，addEndpoint("/websocket")表示注冊一個(gè)端點(diǎn)叫websocket，那么前端就能通過這個(gè)鏈接連接到服務(wù)器實(shí)現(xiàn)雙工通訊了。.withSockJS()意思是使用SockJs協(xié)議，回顧一下：

SockJs是解決瀏覽器不支持ws的情況
Stompjs是簡化文本傳輸?shù)母袷?/p>

configureMessageBroker是配置消息代理，上面我們配置了/user,/topic都是需要消息代理的鏈接。前端/app鏈接前綴過來的消息都會進(jìn)入消息代理。

有了這兩步驟后，我們就可以使用ws了，我們先來寫一下前端：

因?yàn)槲覀兊南⑼ㄖ窃陬^部的用戶名稱那里，所有的頁面都有，所以我們把js寫在layout.ftl上。

$(function () {var elemUser = $('.fly-nav-user');if(layui.cache.user.uid !== -1 && elemUser[0]){var socket = new SockJS("/websocket");stompClient = Stomp.over(socket);stompClient.connect({},function (frame) {//subscribe訂閱stompClient.subscribe('/user/' + ${profile.id} + '/messCount',function (res) {showTips(res.body);})})} });

前面的if判斷，我是根據(jù)收藏那里來寫的，var socket = new SockJS("/websocket");表示建立端點(diǎn)鏈接，這樣前端就會和后端建立ws雙工通道，stompClient = Stomp.over(socket);表示切換成stomp文本傳輸協(xié)議傳輸內(nèi)容。stompClient.connect表示建立連接觸發(fā)的方法，這個(gè)方法里面有個(gè)stompClient.subscribe，差不多就表示訂閱這個(gè)消息隊(duì)列的意思，當(dāng)后端往/user/{userId}/messCount里面發(fā)送消息時(shí)候，當(dāng)前用戶就能接收到消息，res.body就是返回的內(nèi)容，然后就是showTips方法，這個(gè)方法其實(shí)就是渲染新消息通知的樣式，我們從之前的新消息通知那里吧對應(yīng)的js復(fù)制過來即可：

ok，那前端我們已經(jīng)可以連上ws實(shí)現(xiàn)雙工通訊，并且監(jiān)聽了/user/{userId}/messCount這個(gè)隊(duì)列，所以后端往這里面發(fā)送消息前端就能收到然后實(shí)現(xiàn)showTips方法。那后端什么時(shí)候該發(fā)送消息給前端呢？

有人評論了作者文章，或者回復(fù)作者的評論
系統(tǒng)消息等

ok，我們先來寫一個(gè)wsService，寫一個(gè)發(fā)送消息數(shù)量給前端的方法。

com.example.service.WsService

void sendMessCountToUser(Long userId, Integer count);

他的實(shí)現(xiàn)類復(fù)雜嘛？其實(shí)不復(fù)雜，我們先來看下參數(shù)，userId，就是限定要給誰發(fā)送消息，count是消息數(shù)量，這里我們考慮多種情況，但count不為空時(shí)候，我們返回count數(shù)量的，當(dāng)count為空時(shí)候，我們搜索userId所有未讀的消息數(shù)量然后返回。

com.example.service.impl.WsServiceImpl

@Slf4j @Service public class WsServiceImpl implements WsService {@Autowiredprivate SimpMessagingTemplate messagingTemplate ;@AutowiredUserMessageService userMessageService;/*** 訂閱鏈接為/user/{userId}/messCount的用戶能收到消息* /user為默認(rèn)前綴** @param userId* @param count*/@Asyncpublic void sendMessCountToUser(Long userId, Integer count) {if(count == null) {count = userMessageService.count(new QueryWrapper<UserMessage>().eq("status", 0).eq("to_user_id", userId));}this.messagingTemplate.convertAndSendToUser(userId.toString(),"/messCount", count);log.info("ws發(fā)送消息成功------------> {}，數(shù)量：{}", userId, count);} }

發(fā)送ws消息，用的是SimpMessagingTemplate，convertAndSendToUser方法會自動在前面添加前綴/user，然后是userId，加上后面的后綴/messCount，所以加起來的鏈接其實(shí)就是/user/{userId}/messCount，那么我們在需要發(fā)送消息的地方調(diào)用這個(gè)方法即可。然后這里還有個(gè)內(nèi)容要點(diǎn)，就是這里我用了一個(gè)@Async表示異步，從線程角度來說就是新起一個(gè)線程來執(zhí)行這個(gè)方法，從而保證不影響調(diào)用方的事務(wù)和執(zhí)行時(shí)間等。

那么我們來說下@Async的用法

異步@Async

其實(shí)這里我原本是想用隊(duì)列來實(shí)現(xiàn)的，也能表示異步。本著讓同學(xué)們接觸到更多知識，我們這里就用了@Aysnc注解來實(shí)現(xiàn)，后面我們還是會用到MQ的，同學(xué)們別急。

使用這個(gè)注解我們需要開啟異步配置。注解是@EnableAsync

com.example.config.AsyncConfig

@EnableAsync @Configuration public class AsyncConfig {@BeanAsyncTaskExecutor asyncTaskExecutor() {ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();executor.setCorePoolSize(100);executor.setQueueCapacity(25);executor.setMaxPoolSize(500);return executor;} }

所以使用了@EnableAsync注解之后我們就可以使用@Aysnc注解來實(shí)現(xiàn)異步了，asyncTaskExecutor()其實(shí)就是我用來重寫AsyncTaskExecutor用的，定義了最大線程組等信息。另外Async其實(shí)還可以配置很多信息，比如異步線程出錯時(shí)候的處理（重試等），大家課后可以多查詢一下資料，這注解我在工作中運(yùn)用其實(shí)還比較多的。好了，上面我們已經(jīng)把發(fā)送ws消息的方法改成了異步方法，會起一個(gè)線程執(zhí)行發(fā)送。我們現(xiàn)在需要調(diào)用的地方其實(shí)就是在評論那里。

com.example.controller.PostController#reply(Long, Long, String)

這樣有人評論文章或者回復(fù)評論的時(shí)候，都能實(shí)時(shí)收到消息了，我們來演示一下效果：

至此，我們實(shí)現(xiàn)了傳說中的實(shí)時(shí)通知功能！要膨脹了~

文章閱讀量

接下來的任務(wù)，我們是要完善一下文章閱讀量。之前訪問文章，閱讀量都沒增加，現(xiàn)在我們來補(bǔ)上這個(gè)一個(gè)bug。怎么做呢？是每訪問一次我們就直接修改數(shù)據(jù)庫？這里我們使用緩存在解決這個(gè)問題，每次訪問，我們就直接緩存的閱讀量增一，然后在某一時(shí)刻再同步到數(shù)據(jù)庫中即可。訪問文章時(shí)候，我們把緩存中的閱讀量傳到vo中，具體咋樣的呢，我們找到之前寫的com.example.controller.PostController#view方法，然后我加了這一句代碼：

技術(shù)要把vo的viewCount值修改成緩存的數(shù)量。

com.example.service.impl.PostServiceImpl#setViewCount

@Override public void setViewCount(Post post) {// 從緩存中獲取閱讀數(shù)量Integer viewCount = (Integer) redisUtil.hget("rank_post_" + post.getId(), "post:viewCount");if(viewCount != null) {post.setViewCount((Integer) viewCount + 1);} else {post.setViewCount(post.getViewCount() + 1);}// 設(shè)置新的閱讀redisUtil.hset("rank_post_" + post.getId(), "post:viewCount", post.getViewCount()); }

從代碼中可以看到，我們先從緩存中獲取ViewCount，然后設(shè)置post.setViewCount，最后再把加一之后的值同步到redis中。 ok，這一步還是比較簡單的，接下來我們要起一個(gè)定時(shí)器，然后定時(shí)吧緩存中的閱讀量同步到數(shù)據(jù)庫中，實(shí)現(xiàn)數(shù)據(jù)同步。

com.example.schedules.ScheduledTasks

@Slf4j @Component public class ScheduledTasks {@AutowiredRedisUtil redisUtil;@Autowiredprivate RedisTemplate redisTemplate;@AutowiredPostService postService;/*** 閱讀數(shù)量同步任務(wù)* 每天2點(diǎn)同步*/ // @Scheduled(cron = "0 0 2 * * ?")@Scheduled(cron = "0 0/1 * * * *")//一分鐘（測試用）public void postViewCountSync() {Set<String> keys = redisTemplate.keys("rank_post_*");List<String> ids = new ArrayList<>();for (String key : keys) {String postId = key.substring("rank_post_".length());if(redisUtil.hHasKey("rank_post_" + postId, "post:viewCount")){ids.add(postId);}}if(ids.isEmpty()) return;List<Post> posts = postService.list(new QueryWrapper<Post>().in("id", ids));Iterator<Post> it = posts.iterator();List<String> syncKeys = new ArrayList<>();while (it.hasNext()) {Post post = it.next();Object count =redisUtil.hget("rank_post_" + post.getId(), "post:viewCount");if(count != null) {post.setViewCount(Integer.valueOf(count.toString()));syncKeys.add("rank_post_" + post.getId());} else {//不需要同步的}}if(posts.isEmpty()) return;boolean isSuccess = postService.updateBatchById(posts);if(isSuccess) {for(Post post : posts) {// 刪除緩存中的閱讀數(shù)量，防止重復(fù)同步（根據(jù)實(shí)際情況來）redisUtil.hdel("rank_post_" + post.getId(), "post:viewCount");}}log.info("同步文章閱讀成功 ------> {}", syncKeys);} }

為何獲取所有需要同步閱讀的列表，我們用了keys命令，實(shí)際上當(dāng)redis的緩存越來越大的時(shí)候，我們是不能再使用這keys命令的，因?yàn)閗eys命令會檢索所有的key，是個(gè)耗時(shí)的過程，而redis又是個(gè)單線程的中間件，會影響其他命令的執(zhí)行。所以理論上我們需要用scan命令。考慮到這里博客只是個(gè)簡單業(yè)務(wù)，redis不會很大，所以就直接用了keys命令，后期大家可以自行優(yōu)化。然后獲取到列表后，然后就是獲取所有的實(shí)體，然后批量更新閱讀量。

?給eblog一個(gè)star，感謝支持哈

總結(jié)

以上是生活随笔為你收集整理的（eblog）8、消息异步通知、细节调整的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：所谓技术团队绩效
下一篇：计算机屏幕亮度一般为多少,显示器亮度对比