iOS 列表页面实时刷新解决方案

Posted 2023-01-14 长沙火山

ios 列表页面实时刷新解决方案

一、背景介绍

1.1 问题的出现

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

1.2 问题的解决方案

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

二、WebSocket的介绍

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

WebSocket工作原理

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

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

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

4. 第四步：断开websocket连接。

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

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

三、WebSocket的实际运用

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

iOS WebSocket 工具类下载地址：https://www.jianshu.com/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://www.websocket-test.com/

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

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

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

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

["列表页/关注", "列表页/推荐", "列表页/热点", "列表页/问答"]

3.3 具体实现

大概讲一下我的思路：

1. 定义一个全局的字典；
2. 以接口名 (“列表页/关注”)为key，timestamp为value，保存在全局的字典中；
3. 每刷新成功一次列表接口，将全局字典中接口名对应的值更新一次；
4. 每次收到websocket数据更新消息，将全局字典中接口名对应的值更新一次；
5. 用户进入某个列表页面时，取当前系统的时间和全局字典中这个接口对应的最后刷新时间对比，决定是否需要刷新页面。

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的情况：

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

需要主动断开websocket的情况：

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

需要重新连接websocket的情况：

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

效果图

iOS 自动刷新Demo下载