iOS原生的数据类型传递到js端的转换如下。
Objective-C type | JavaScript type
--------------------+---------------------
nil | undefined
NSNull | null
NSString | string
NSNumber | number, boolean
NSDictionary | Object object
NSArray | Array object
NSDate | Date object
NSBlock (1) | Function object (1)
id (2) | Wrapper object (2)
Class (3) | Constructor object (3)
id类型会转换成Wrapper object。有时候，iOS这边的通信协议的数据是二进制的，而又需要透传到js端。但是NSData直接传过去，js端是不知道是啥东西的，也不能正确的解出来。所以这里需要想点办法。
最终的WebSocketServerDemo在此。
base64
将NSData base64后转换成string，这样js端接收到后，就只需要反解base64，就能得出原始数据。
这样的不足之处，就是两端需要做额外的操作，原生encode，js端decode，可能会有损性能，但是还需要测试数据才知道。
array
同base64的做法大同小异，将data转成array，array里面是一个个的字节，然后传到js端，也是个数组，再调用js的方法转成arrayBuffer。
obj是传过来是byte数组。
var binary = new Uint8Array(obj.length);
for (var i = 0; i < obj.length; i++) {
binary[i] = obj[i];
}
// 然后将Uint8Array转成ArrayBuffer
websocket
通过websocket，传输的数据会自动转成arraybuffer。这样就无需任何转换了。
在app本地起一个websocket server，js端进行连接，连上后开始发心跳，断线进行重连。因为是在本地起的server，所以不会收到网络状态的影响。
在找iOS websocket的server端时，一开始搜到的是BLWebSocketsServer，但是它不支持发送二进制数据，😲。
然后又看到CocoaHTTPServer，它也支持websocket。高高兴兴的用起来，最后发现它竟然也不能发送二进制。幸好，天无绝人之路，在repo的pr中，有人已经实现了，只是作者没有合入。so，把代码copy过来，成功的跑起来了。
主要的改动是websocket中的2个函数。
- (void)sendData:(NSData *)msgData isBinary:(BOOL)binary;
- (void)didReceiveData:(NSData *)data;
原生起websocket server
- WebSocketManager会启动server
- MyHTTPConnection会在有连接过来时，创建webSocket。
- MyWebSocket主要是代理方法didOpen/didReceiveMessage/didReceiveData等。
Paste_Image.png
启动心跳包计时器
暂定是js每隔5s发一次心跳，在收到心跳后，app会启动8s的倒计时。如果8s后还没收到，会断开连接。反之，清空计时器。
- (void)didReceiveMessage:(NSString *)msg
{
if (msg && msg.length > 0) {
NSData *data = [msg dataUsingEncoding:NSUTF8StringEncoding];
if (data) {
NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:nil];
NSString *messageType = [dict objectForKey:@"messageType"];
if (messageType && messageType.length > 0) {
if ([messageType isEqualToString:@"heartBeat"]) {
[self startHeartBeatRecvTimer];
}
}
}
}
}
// 心跳回包计时器
- (void)startHeartBeatRecvTimer
{
[self stopHeartBeatRecvTimer];
__weak typeof(self) wself = self;
if (!_heartBeatRecvQueue) {
_heartBeatRecvQueue = dispatch_queue_create("com.yy.mobile.heatBeatRecv", DISPATCH_QUEUE_SERIAL);
}
_heartBeatRecvTimer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, _heartBeatRecvQueue);
dispatch_source_set_timer(_heartBeatRecvTimer, dispatch_walltime(NULL, 8 * NSEC_PER_SEC), DISPATCH_TIME_FOREVER, (1ull * NSEC_PER_SEC) / 10);
dispatch_source_set_event_handler(_heartBeatRecvTimer, ^{
[wself timerHandle];
});
dispatch_resume(_heartBeatRecvTimer);
}
收发送二进制
1、发送
测试数据：前4个字节是appId，后面是string。
- (void)sendBinaryData {
NSMutableData *data = [NSMutableData dataWithCapacity:0];
uint32_t appId = 29999;
[data appendBytes:&appId length:sizeof(uint32_t)];
NSString *text = @"what";
[data appendData:[text dataUsingEncoding:NSUTF8StringEncoding]];
[self sendData:data isBinary:YES];
}
2、接收
- (void)didReceiveData:(NSData *)data {
NSInteger headerLen = 4;
if (data && data.length >= headerLen) {
NSData *headerData = [data subdataWithRange:NSMakeRange(0, headerLen)];
if (headerData && headerData.length > 0) {
uint32_t appId;
[headerData getBytes:&appId length:sizeof(uint32_t)];
NSData *realData = [data subdataWithRange:NSMakeRange(headerLen, data.length - headerLen)];
NSString *text = [[NSString alloc] initWithData:realData encoding:NSUTF8StringEncoding];
NSLog(@"appid:%d,text:%@", appId, text);
}
}
}
js端
1、发起连接
websocket = new WebSocket('ws://127.0.0.1:12345/service');
// 这句很重要
websocket.binaryType = 'arraybuffer';
2、发送心跳
websocket.onopen = function () {
// 建立连接，将重试次数重置
reconnectAttempts = 0;
console.log("socket opened");
$('h2').css('color', 'green');
sendHeartBeat();
};
3.接收数据
要注意的是网络字节序的问题。
var appId = dv.getUint32(0,true)，true表示小端。
之前卡在这里很久，一直得出的是个很大的数，很费解。后来才发现是因为没写true取成了大端。
websocket.onmessage = function (message) {
var data = message.data;
if (data instanceof ArrayBuffer) {
// 前4个字节appId
var headerLen = 4
var buf = data.slice(0, headerLen);
var dv = new DataView(buf, 0);
// 小端
var appId = dv.getUint32(0,true);
var len = data.byteLength
var buf3 = data.slice(headerLen, len)
// 收到数据，直接发回去，为了测试
websocket.send(data)
}
};
4、重连
采取的策略是指数级时间重试，1，2，4，8，16，最多重试5次。
// 重连
function reConnect() {
alert('reconnect');
reconnectAttempts++;
if (reconnectAttempts > reConnnectTimeInterval.length) {
return;
}
var timeOut = reConnnectTimeInterval[reconnectAttempts - 1];
setTimeout(function() {
connect();
}, timeOut)
}
网友评论