iOS 列表页面实时刷新解决方案_长沙火山

未知 02-07 1524

iOS 列表页面实时刷新解决方案一、背景介绍 1.1 问题的出现

客户要求APP客户端每次切换Tab，都需要从服务器去获取最新的数据，所以每次切换Tab，客户端都会去主动刷新接口，以获取最新的数据。但是实际发现，每次切换Tab都去刷新，从用户体验上感觉刷新太频繁了；从性能上体验，没有数据更新也去频繁的请求接口，很消耗网络资源。于是，客户针对这一情况，提出了新的需求：当服务器有数据更新的时候，此时客户端去主动刷新列表接口以获取最新的数据，否则不需要客户端主动去请求接口，直接显示上一次从服务器请求的数据。这样就既做到了用户每次可以看到最新的数据，而且不影响用户体验和性能。

1.2 问题的解决方案

要实现列表做到服务器有数据更新时去主动请求接口，没有数据更新时则不请求接口，关键是要知道服务器什么时候数据更新了，需要服务器主动告知客户端某个列表的接口有数据更新了，当用户切换到此列表时，需要客户端主动去请求接口，获取最新的数据。要实现这一功能，采用websocket是最合适的。websocket能保持服务器和客户端的通信，当服务器有数据更新了，通过websocket告知用户需要刷新列表了。

二、WebSocket的介绍

WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯。

WebSocket工作原理

第一步：客户端连接websocket（连接地址 ws://…）

第二步：服务器向客户端发送心跳包。如果客户端能收到服务器发送的心跳包，则表明websocket连接成功。只要客户端不断开websocket，就能一直收到服务器发送的心跳包，如果客户端收不到心跳包了，则说明已经断开了连接，此时需要客户端重新去连接websocket。心跳包的存在，其实就是为了监测websocket是否断开连接了。

第三步：服务器主动推送消息给客户端，客户端根据具体的需求去处理业务逻辑。

第四步：断开websocket连接。

当用户退出登录，或者是App退到了后台，此时则需要主动断开websocket，以减少服务器性能的损耗。

以上，就是websocket的工作原理。

三、WebSocket的实际运用

WebSocket的工具类网上有很多，从网上下载一个websocet连接和收发消息的工具类即可。

iOS WebSocket 工具类下载地址：https://·/p/821b777555d3

3.1 客户端连接websocket - (void)webSocketLogin { //请更换websocket连接地址 NSString *url = @"ws://121.40.165.18:8800"; [[SocketRocketUtility instance] SRWebSocketOpenWithURLString:url]; }

连接成功之后，可以通过如下方法，收到服务器推送过来的websocket消息：

- (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message { if (webSocket == self.socket) { NSLog(@"************************** socket收到数据了************************** "); NSLog(@"message:%@", message); } }

打印日志如下：

************************** socket 连接成功************************** message:{"type":"welcome"} //websocket连接成功的提示 message:{"type":"ping","message":1650606091} //心跳包 message:{"type":"ping","message":1650606094} //心跳包 message:{"type":"ping","message":1650606097} //心跳包 ...

Websocket连接辅助测试网站：http://·/

3.2 判断是否自动刷新的思路

比如，模拟列表页/关注列表接口的数据更新，服务器会通过websocket向客户端推送如下消息：

{"message":{"type":"refresh_list", "list_key":"列表/关注","timestamp":1669097371}}

这里主要是通过当前数据更新的时间，与上一次接口刷新的时间对比，然后判断是否需要刷新某个列表的接口。根据接口文档提供的需要自动刷新的列表接口有：

["列表页/关注", "列表页/推荐", "列表页/热点", "列表页/问答"] 3.3 具体实现

大概讲一下我的思路：

定义一个全局的字典；以接口名 (“列表页/关注”)为key，timestamp为value，保存在全局的字典中；每刷新成功一次列表接口，将全局字典中接口名对应的值更新一次；每次收到websocket数据更新消息，将全局字典中接口名对应的值更新一次；用户进入某个列表页面时，取当前系统的时间和全局字典中这个接口对应的最后刷新时间对比，决定是否需要刷新页面。 3.3.1 定义一个全局的字典 #import "ApiNameData.h" @implementation ApiNameData + (instancetype)sharedInstance { static ApiNameData *_sharedInstance = nil; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ _sharedInstance = [[ApiNameData alloc] init]; }); return _sharedInstance; } - (NSMutableDictionary *)apiNameDict { if(!_apiNameDict){ _apiNameDict = [[NSMutableDictionary alloc] init]; } return _apiNameDict; } 3.3.2 定义一个刷新的工具类 @interface RefreshUntil : NSObject + (RefreshUntil *)shareInstance; - (void)refreshSuccess:(NSString *)apiName; - (BOOL)isNeedRefresh:(NSString *)apiName; - (void)setRefreshTime:(NSNumber *)timestamp withApiName:(NSString *)apiName; - (void)clear; @end #import "RefreshUntil.h" @implementation RefreshUntil + (RefreshUntil *)shareInstance { static RefreshUntil *shareInstance = nil; static dispatch_once_t predicate; dispatch_once(&predicate, ^{ shareInstance = [[RefreshUntil alloc] init]; }); return shareInstance; } - (void)refreshSuccess:(NSString *)apiName { [[ApiNameData sharedInstance].apiNameDict setObject:[self nowTimeInterval] forKey:apiName]; } - (BOOL)isNeedRefresh:(NSString *)apiName { NSNumber *timestamp1 = [self nowTimeInterval]; NSNumber *timestamp2 = [ApiNameData sharedInstance].apiNameDict[apiName]; return [timestamp1 doubleValue]<[timestamp2 doubleValue]; } - (void)setRefreshTime:(NSNumber *)timestamp withApiName:(NSString *)apiName { [[ApiNameData sharedInstance].apiNameDict setObject:timestamp forKey:apiName]; } - (void)clear { [[ApiNameData sharedInstance].apiNameDict removeAllObjects]; } //获取当前时间戳 - (NSNumber *)nowTimeInterval { NSDate *date = [NSDate dateWithTimeIntervalSinceNow:0]; NSString *time = [NSString stringWithFormat:@"%.0f", [date timeIntervalSince1970]]; NSNumber *timestamp = [NSNumber numberWithDouble:[time doubleValue]]; return timestamp; } @end 3.3.3 每次收到websocket数据更新消息，将全局字典中接口名对应的值更新一次 - (void)receiveRefreshMessage:(NSDictionary *)messageDict { NSString *list_key = messageDict[@"list_key"]; NSNumber *timestamp = messageDict[@"timestamp"]; [[RefreshUntil shareInstance] setRefreshTime:timestamp withApiName:list_key]; } 3.3.4 用户进入某个列表页面时，取当前系统的时间和全局字典中这个接口对应的最后刷新时间对比，决定是否需要刷新页面 BOOL isNeedRefresh = [[RefreshUntil shareInstance] isNeedRefresh:@"列表页/关注"]; if(isNeedRefresh==YES){ [self.tableView.mj_header beginRefreshing]; } 3.3.5 每刷新成功一次列表接口，将全局字典中接口名对应的值更新一次 [[RefreshUntil shareInstance] refreshSuccess:@"列表页/关注"]; 3.4 websocket的连接与断开

需要主动连接websocket的情况：

用户登录成功之后，主动连接websocket；APP从后台进入前台的时候，主动连接websocket；

需要主动断开websocket的情况：

用户退出登录之后，主动断开websocket；APP从前台进入后台的时候，主动断开websocket；

需要重新连接websocket的情况：

websocket自动断开，客户端收不到服务器的心跳包，需要重新连接websocket

效果图

iOS 自动刷新Demo下载