基于 GCDAsyncSocket，简单实现相似《你猜我画》的 socket 数据传输
1、前言
- Socket
- Socket 是对 TCP/IP 协议的封装，其中IP协议对应为网络层，TCP 协议对应为传输层，而咱们经常使用的HTTP协议，是位于应用层，在七层模型中HTTP协议是基于 TCP/IP 的，咱们想要使用 TCP/IP 协议，则要经过 Socket
- Socket 编程用途（其余待补充）
- 长链接
- 端到端的即时通信
- Socket 和 Http（来源网络）
- socket 通常用于比较即时的通讯和实时性较高的状况，好比推送，聊天，保持心跳长链接等，http 通常用于实时性要求不那么高的状况，好比信息反馈，图片上传，获取新闻信息等。
2、相似《你猜我画》简易效果说明
效果（分别是模拟器和手机截图）
git- 工做中碰到相似需求，但没找到相似的成熟的第三方框架，只有先看看原理性的东西了。其实也就基于 socket 即时传输图片数据、笔画数据，还有聊天文字，也能够拓展作其余的指令控制
- 没有作注册登陆，没有作用户管理，只是简单原理性的探讨
基于 GCDAsyncSocket 框架进行，关于 GCDAsyncSocket 的介绍可自行了解github
3、服务端部分代码
- 直接用 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;
}
4、移动端部分代码
- 基于 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];
}
- 笔画数据的接受
- 须要转换坐标，解析自定义传输的数据格式
// 一、接受坐标点
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 addLineToPoint: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];
5、小demo地址
https://github.com/HOWIE-CH/-You-guess-I-painted-_socket.gitweb
6、问题
- 定义了图片文件二进制数据、笔画路径二进制数据、聊天字符串二进制数据，三种格式的二进制数据，在 GCDAsyncSocket 接受数据的代理方法，须要判断接受的二进制文件的类型再进行解析，若是有更好的方式可留言。
- 只是简单的功能的尝试，有时存在画的一条线过长就传输不过去的状况，存在图片偶尔传输不完整的状况
- 不清楚是否有相关成熟的框架，若是有，请留言。
- 最近试过服务端是 NodeJs 用 socket.io 的话，iOS 用 GCDAsyncSocket，感受这样是通信不了的。像这样要实现 Android、iOS 跨平台 socket 传输数据，那 socket 选择什么框架呢，服务端选择什么 socket 框架？ 以前即时通信都是 XMPP ，如今貌似是 webSocket socket.io 了。
相关文章
- 1. socket + vue + canvas实践，你画我猜（二）
- 2. Cocos Creator 实现画板（你画我猜）
- 3. 你画我猜
- 4. GCDAsyncSocket 简单使用
- 5. 使用websocket实现“你画我猜”
- 6. iOS开发 教学白板，互动版本，画画功能实现（类似于你画我猜功能）
- 7. Socket&GCDAsyncSocket（异步Socket）
- 8. Python简单实现基于VSM的余弦相似度计算
- 9. Socket与底层数据传输实现
- 10. 相似于xml的一种数据传输格式protobuf
- 更多相关文章...
- • 如何干扰TCP数据传输？ - TCP/IP教程
- • 现实生活中的 XML - XML 教程
- • Flink 数据传输及反压详解
- • ☆基于Java Instrument的Agent实现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
