本文為您引見基於 GCDAsyncSocket,復雜完成相似《你猜我畫》的 socket 數據傳輸的相關引見,詳細代碼請看下文
一、前言 Socket Socket 是對 TCP/IP 協議的封裝,其中IP協議對應為網絡層,TCP 協議對應為傳輸層,而我們常用的HTTP協議,是位於使用層,在七層模型中HTTP協議是基於 TCP/IP 的,我們想要運用 TCP/IP 協議,則要經過 Socket Socket 編程用處(其他待補充) 長銜接 端到端的即時通訊 Socket 和 Http(來源網絡) socket 普通用於比擬即時的通訊和實時性較高的狀況,比方推送,聊天,堅持心跳長銜接等,http 普通用於實時性要求不那麼高的狀況,比方信息反應,圖片上傳,獲取舊事信息等。 二、相似《你猜我畫》簡易效果闡明效果(辨別是模仿器和手機截圖)
任務中碰到相似需求,但沒找到相似的成熟的第三方框架,只要先看看原感性的東西了。其實也就基於 socket 即時傳輸圖片數據、筆畫數據,還有聊地理字,也可以拓展做其他的指令控制 沒有做注冊登錄,沒有做用戶管理,只是復雜原感性的討論基於 GCDAsyncSocket 框架停止,關於 GCDAsyncSocket 的引見可自行理解
三、服務端局部代碼 直接用 mac 順序作為服務端 Server 類/*!
@method 開啟服務
@abstract 開啟服務器 TCP 銜接服務
*/
- (void)startServer {
self.serverSocket = [[GCDAsyncSocket alloc]initWithDelegate:self
delegateQueue:dispatch_get_main_queue()];
NSError *error = nil;
[self.serverSocket acceptOnPort:5555
error:&error];
if (error) {
NSLog(@"服務開啟失敗");
} else {
NSLog(@"服務開啟成功");
}
}
#pragma mark - GCDAsyncSocketDelegate
/*!
@method 收到socket端銜接回調
@abstract 服務器收到socket端銜接回調
*/
- (void)socket:(GCDAsyncSocket *)sock didAcceptNewSocket:(GCDAsyncSocket *)newSocket {
[self.clientSocketArray addObject:newSocket];
[newSocket readDataWithTimeout:-1
tag:self.clientSocketArray.count];
}
/*!
@method 收到socket端數據的回調
@abstract 服務器收到socket端數據的回調
*/
- (void)socket:(GCDAsyncSocket *)sock didReadData:(NSData *)data withtag:(long)tag {
// 直接停止轉發數據
for (GCDAsyncSocket *clientSocket in self.clientSocketArray) {
if (sock != clientSocket) {
[clientSocket writeData:data
withTimeout:-1
tag:0];
}
}
[sock readDataWithTimeout:-1
tag:0];
}
main 中
int main(int argc, const char * argv[]) {
@autoreleasepool {
Server *chatServer = [[Server alloc]init];
[chatServer startServer];
// 開啟主運轉循環
[[NSRunLoop mainRunLoop] run];
}
return 0;
}
四、挪動端局部代碼
基於 GCDAsyncSocket 的承受數據代理辦法及發送數據辦法
圖片數據的發送
// 回調 發送圖片
__weak typeof(self) weakSelf = self;
bgImgView.block = ^(UIImage *img) {
weakSelf.drawView.drawImg = img;
// image
NSData *imgData = UIImageJPEGRepresentation(weakSelf.drawView.drawImg, 0.2);
NSMutableData *dat = [NSMutableData data];
[dat appendData:imgData];
// 拼接二進制數據流的完畢符
NSData *endData = [@"$" dataUsingEncoding:NSUTF8StringEncoding];
[dat appendData:endData];
// 發送數據
[weakSelf.clientSocket writeData:dat
withTimeout:-1
tag:111111];
};
圖片二進制數據的傳輸是基於流的,一段一段的,防止斷包缺包等問題,需求拼接完畢符,圖片數據完畢
圖片數據的承受承受
// 拼接數據 轉成圖片
[self.socketReadData appendData:data];
NSData *endData = [data subdataWithRange:NSMakeRange(data.length -1, 1)];
NSString *end= [[NSString alloc] initWithData:endData
encoding:NSUTF8StringEncoding];
if ([end isEqualToString:@"$"]) {
UIImage *tmpImg = [UIImage imageWithData:self.socketReadData];
self.drawView.drawImg = tmpImg;
[self.drawView setNeedsDisplay];
[self.clientSocket readDataWithTimeout:-1
tag:111111];
// 拼完圖片 恢復默許
self.socketReadData = nil;
}
畫布筆畫數據的傳輸
由於傳輸的是二進制數據,所以采取將貝塞爾曲線轉換成 CGPoint 坐標數組,再加上線寬和線的顏色,最後組成一個字典,轉換為二進制停止傳輸
思索到坐標點在不同屏幕上需求適配,因而需求把以後手機端的屏幕高寬一同傳輸
/*!
@method 發送途徑
@abstract 經過socket 發送途徑信息
*/
- (void)sendPath {
// path 坐標點及 轉換
NSArray *points = [(UIBezierPath *)self.dataModel.path points];
NSMutableArray *tmp = [NSMutableArray array];
for (id value in points) {
CGPoint point = [value CGPointValue];
NSDictionary *dic = @{@"x" : @(point.x), @"y": @(point.y)};
[tmp addObject:dic];
}
// 顏色類別
NSInteger colorNum = 0;
if (CGColorEqualToColor(self.drawView.color.CGColor, [UIColor redColor].CGColor)) {
colorNum = 1;
}
else if (CGColorEqualToColor(self.drawView.color.CGColor, [UIColor blueColor].CGColor) ){
colorNum = 2;
} else if (CGColorEqualToColor(self.drawView.color.CGColor, [UIColor greenColor].CGColor) ) {
colorNum = 3;
}
// 傳遞數據格式
NSDictionary *pathDataDict = @{
@"path" : tmp,
@"width" : @(self.drawView.width),
@"color" : @(colorNum),
@"screenW": @([UIScreen mainScreen].bounds.size.width),
@"screenH": @([UIScreen mainScreen].bounds.size.height)
};
NSData *pathData = [NSJSONSerialization
dataWithJSONObject:pathDataDict
options:NSJSONWritingPrettyPrinted
error:nil];
[self.clientSocket writeData:pathData
withTimeout:-1
tag:111111];
}
筆畫數據的承受
需求轉換坐標,解析自定義傳輸的數據格式
// 1、承受坐標點
NSInteger w = [tmpDict[@"screenW"] integerValue];
NSInteger h = [tmpDict[@"screenH"] integerValue];
CGFloat scaleW = [UIScreen mainScreen].bounds.size.width / w;
CGFloat scaleH = [UIScreen mainScreen].bounds.size.height / h;
// 處置點
NSArray *pointDict = tmpDict[@"path"];
DIYBezierPath *path = [[DIYBezierPath alloc]init];
for (NSDictionary *tmpDict in pointDict) {
CGPoint point = CGPointMake([tmpDict[@"x"] floatValue] * scaleW, [tmpDict[@"y"] floatValue] * scaleH);
NSInteger index = [pointDict indexOfObject:tmpDict];
if (index == 0) {
[path moveToPoint:point];
} else {
[path addL.netoPoint:point];
}
}
switch ([tmpDict[@"color"] integerValue]) {
case 0:
self.drawView.color = [UIColor blackColor];
break;
case 1:
self.drawView.color = [UIColor redColor];
break;
case 2:
self.drawView.color = [UIColor blueColor];
break;
case 3:
self.drawView.color = [UIColor greenColor];
break;
default:
break;
}
self.drawView.width = [tmpDict[@"width"] floatValue];
self.drawView.currentPath = path;
self.drawView.currentPath.pathColor = self.drawView.color;
self.drawView.currentPath.lineWidth = self.drawView.width;
[self.drawView.pathArray addObject:path];
[self.drawView setNeedsDisplay];
五、小demo地址
https://github.com/HOWIE-CH/-You-guess-I-painted-_socket.git
六、問題 定義了圖片文件二進制數據、筆畫途徑二進制數據、聊天字符串二進制數據,三種格式的二進制數據,在 GCDAsyncSocket 承受數據的代理辦法,需求判別承受的二進制文件的類型再停止解析,假如有更好的方式可留言。 只是復雜的功用的嘗試,有時存在畫的一條線過長就傳輸不過來的狀況,存在圖片偶然傳輸不完好的狀況 不清楚能否有相關成熟的框架,假如有,請留言。【基於 GCDAsyncSocket,復雜完成相似《你猜我畫》的 socket 數據傳輸】的相關資料介紹到這裡,希望對您有所幫助! 提示:不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦!