iOS原生的數(shù)據(jù)類(lèi)型傳遞到j(luò)s端的轉(zhuǎn)換如下。
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類(lèi)型會(huì)轉(zhuǎn)換成Wrapper object。有時(shí)候，iOS這邊的通信協(xié)議的數(shù)據(jù)是二進(jìn)制的，而又需要透?jìng)鞯絡(luò)s端。但是NSData直接傳過(guò)去，js端是不知道是啥東西的，也不能正確的解出來(lái)。所以這里需要想點(diǎn)辦法。
最終的WebSocketServerDemo在此。
base64
將NSData base64后轉(zhuǎn)換成string，這樣js端接收到后，就只需要反解base64，就能得出原始數(shù)據(jù)。
這樣的不足之處，就是兩端需要做額外的操作，原生encode，js端decode，可能會(huì)有損性能，但是還需要測(cè)試數(shù)據(jù)才知道。
array
同base64的做法大同小異，將data轉(zhuǎn)成array，array里面是一個(gè)個(gè)的字節(jié)，然后傳到j(luò)s端，也是個(gè)數(shù)組，再調(diào)用js的方法轉(zhuǎn)成arrayBuffer。
obj是傳過(guò)來(lái)是byte數(shù)組。
var binary = new Uint8Array(obj.length);
for (var i = 0; i < obj.length; i++) {
binary[i] = obj[i];
}
// 然后將Uint8Array轉(zhuǎn)成ArrayBuffer
websocket
通過(guò)websocket，傳輸?shù)臄?shù)據(jù)會(huì)自動(dòng)轉(zhuǎn)成arraybuffer。這樣就無(wú)需任何轉(zhuǎn)換了。
在app本地起一個(gè)websocket server，js端進(jìn)行連接，連上后開(kāi)始發(fā)心跳，斷線(xiàn)進(jìn)行重連。因?yàn)槭窃诒镜仄鸬膕erver，所以不會(huì)收到網(wǎng)絡(luò)狀態(tài)的影響。
在找iOS websocket的server端時(shí)，一開(kāi)始搜到的是BLWebSocketsServer，但是它不支持發(fā)送二進(jìn)制數(shù)據(jù)，??。
然后又看到CocoaHTTPServer，它也支持websocket。高高興興的用起來(lái)，最后發(fā)現(xiàn)它竟然也不能發(fā)送二進(jìn)制。幸好，天無(wú)絕人之路，在repo的pr中，有人已經(jīng)實(shí)現(xiàn)了，只是作者沒(méi)有合入。so，把代碼copy過(guò)來(lái)，成功的跑起來(lái)了。
主要的改動(dòng)是websocket中的2個(gè)函數(shù)。
- (void)sendData:(NSData *)msgData isBinary:(BOOL)binary;
- (void)didReceiveData:(NSData *)data;
原生起websocket server
- WebSocketManager會(huì)啟動(dòng)server
- MyHTTPConnection會(huì)在有連接過(guò)來(lái)時(shí)，創(chuàng)建webSocket。
- MyWebSocket主要是代理方法didOpen/didReceiveMessage/didReceiveData等。
啟動(dòng)心跳包計(jì)時(shí)器
暫定是js每隔5s發(fā)一次心跳，在收到心跳后，app會(huì)啟動(dòng)8s的倒計(jì)時(shí)。如果8s后還沒(méi)收到，會(huì)斷開(kāi)連接。反之，清空計(jì)時(shí)器。
- (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];
}
}
}
}
}
// 心跳回包計(jì)時(shí)器
- (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);
}
收發(fā)送二進(jìn)制
1、發(fā)送
測(cè)試數(shù)據(jù)：前4個(gè)字節(jié)是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、發(fā)起連接
websocket = new WebSocket('ws://127.0.0.1:12345/service');
// 這句很重要
websocket.binaryType = 'arraybuffer';
2、發(fā)送心跳
websocket.onopen = function () {
// 建立連接，將重試次數(shù)重置
reconnectAttempts = 0;
console.log("socket opened");
$('h2').css('color', 'green');
sendHeartBeat();
};
3.接收數(shù)據(jù)
要注意的是網(wǎng)絡(luò)字節(jié)序的問(wèn)題。
var appId = dv.getUint32(0,true)，true表示小端。
之前卡在這里很久，一直得出的是個(gè)很大的數(shù)，很費(fèi)解。后來(lái)才發(fā)現(xiàn)是因?yàn)闆](méi)寫(xiě)true取成了大端。
websocket.onmessage = function (message) {
var data = message.data;
if (data instanceof ArrayBuffer) {
// 前4個(gè)字節(jié)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)
// 收到數(shù)據(jù)，直接發(fā)回去，為了測(cè)試
websocket.send(data)
}
};
4、重連
采取的策略是指數(shù)級(jí)時(shí)間重試，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)
}
