网络越来越好,手机之间的互动已经是常态,王者荣耀、微信实时视频等,已经将多屏互动推到各到各种应用场景。
为了让大家能清楚地了解多屏互动,我将结合实例对移动设备实时通信进行研究,并系统性地呈现一些解决方案。
最开始,我尝试给大家展示如何建立一个最简单的点对点通信。
万事开头难,先假定一下需求:
局域网内通信。
写一个你看我画的程序。
纯客户端(一开始,我不打算让服务器参与)。
下面对需求进行进一步的分析。
从原型上看,我们的流程应该是下图的形式。
下面我们进行架构设计与开发选型了。
基于前文的需求假定进行简单设计网络模型,我将目标的网络分拆成3层:
对应的开发架构应该是这样的
基于实时通信的高效性,我将底层库的开发语言选择了C++,协议格式选择为二进制,网络层协议选择UDP(后面会有切换TCP的选择)。
通信协议端口我选择12000.
字段
注解
底层库开发语言
C++
协议格式
二进制
网络层协议
UDP
通信端口
12000
下面我将开始搭建底层库(写到这里还是一行代码都没写,不过现在是国庆节,既然有时间那就开始搞吧)。
工程目录如下
我设计的busi头文件,给上层调用的。(详细的见 github)
花了半天的时间写完了底层库,先来测试一下底层库的连通性,我写了一个程试程序,只列下核心文件, 详细请看github上。
因为我有一台mac, 一个ubuntu,所有测试时候,2边都要编译,mac是用xcode比较简单,ubuntu上编写makefile
framework:
test
生成的程序如下:
现在我们来实测一下连通性:
我让mac做主动连接的一方,让linux做被动连接。
然后试着各自问候一下吧
可以看到2者已经通了,咱们的底层库搭建OK!
感兴趣并助喜欢动手同学,可以 下载代码 实测一下。
为了方便调试,我选择开发一个mac版的你看我画。
在xcode上建立一个spritekit工程
在storyboard上加入按钮元素并绑定ViewController中的变量。
framework为底层库,util为工具目录,adaptor为适配层。
创建一个自定义的view用来实现绘画。
在实现上我用最简单的绘图API, 不过为了区分对手与我画的,我用了2种颜色。
设置自定义鼠标响应事件
并在代码里创建1个scene用于加载自定义view.
object c 调用原生C++,我的做法是加一层代理。
我将代码结构设计如下
含义
CoreData
应用层协议结构
CoreAdaptor
object c 适配
CoreDelegate
代码接口
Core
c++适配
在开发的时候,我希望上层在发送消息时,不需要指定IP与端口,而只需要索引就行,因此在framework层
建立一个 地址与索引的对应关系。
所以适配层调用接口只需要指定index就行了
结合之前设计的流程图,这个游戏过程的生命周期用viewcontroller 中的代码表示如下:
所以最终连接建立要么在confirm后,要么在onConfirm后。
start函数其实只是负责切换到画图场景
OK,整体代码写完后,我们来演示一下效果。
先看下截图
明天我上传下视频,我画的有点丑,不过没关系,大家可以上github上拉下来自己画。
<a href="https://github.com/70207/draw.git">https://github.com/70207/draw.git</a>