HTML5技术

基于 socket.io, 简单实现多平台类似你猜我画 socket 数据传输 - HOWIE-CH

字号+ 作者:H5之家 来源:H5之家 2017-03-09 17:00 我要评论( )

一、前言二、本例说明 服务器端采用 Nodejs 开启本地服务,统一使用 socket.io 对 iOS 端和 web 进行即时通讯,简单实现类似你猜我画的数据传输 效果 三、服务器端 使用 express 进行简单的搭建,设置模板引擎及静态服务,新手会遇到一个坑,就是路径的问题

一、前言 二、本例说明

  • 服务器端采用 Nodejs 开启本地服务,统一使用 socket.io 对 iOS 端和 web 进行即时通讯,简单实现类似你猜我画的数据传输
  • 效果

  • 三、服务器端
  • 使用 express 进行简单的搭建,设置模板引擎及静态服务,新手会遇到一个坑,就是路径的问题,一般使用 __dirname,来拼接绝对路径

    ..)...static(path.join(__dirname, "/upload/")));

  • 使用 socket.io,来进行 socket 数据监听及数据广播,这是服务器端做的主要事情,本例中传输的数据及格式是自定义的,分为三种,一种是画笔画的路径(path),传输的是一系列的坐标点,一种是图片(img),传输的是 base64 字符串,另一种是发送的文字(text),传输的是字符串

  • io .(socket) .).(msg) msg).(msg) msg).(msg) .); });

    四、web
  • 关于笔画的传输:使用 canvas,进行画板的相关操作,并保存所有的路径的坐标点,然后 socket 传输

    canvas ctx colorArray ].(e) ....randomNum ..tmp .point .......(e) .point ........() .pathDataDict tmprandomNum.

  • 关于图片的传输:由于 input type="file" 拿不到本地的图片路径,所以采取先上传图片到服务器,再拿到图片路径,然后通过 canvas 画出来和用 canvas 转换为 base64,然后 socket 发送出去
  • 这里采用 jquery.form 框架,使用 ajax 异步提交表单,新手有个坑,就是 form 里面提交按钮的 type 要设置为 button,不然就是 form submit了,页面会跳转的

    ((data) ) () image ()..() )..toString() .(data) ); });

  • 关于文字,就很简单,直接 socket 发送字符串
  • 关于数据的接收,这里要提到一个与 iOS 版 socket.io 不同的地方,在 iOS 端,发送数据是要把数据包装成一个数组的,如 [self.clientSocket emit:@"text" with:@[self.chatTextField.text]];,但在前端接收的数据就直接是 iOS 端数组里的对象,不用取数组第一个,但反过来,在 iOS 端就需要去数组里的第一个了,这里简单说下图片的接收吧,由于对 canvas 不熟,只能采取先创建一个临时的 img 标签展示 base64Url 的图片,然后在 canvas 接收 img 这个 HTMLElement,画出图片,最后删掉这个临时的 img 标签,如果有更好的方法可以留言

    (msg) ()));

  • 五、iOS
  • 这里官方最新的 socket.io 是只有 swift 版的,之前有旧的oc 版本,但支持的socket.io 是v0.9.x,参考链接 https://github.com/pkyeck/socket.IO-objc,但这很显然不是我想要的,于是开始混编吧
  • 一开始参考了https://github.com/socketio/socket.io-client-swift/issues/393 里的做法,使用 carthage 打包好的 framework,但各种报错
  • 想起之前 oc 调用 swfit 文件,先是直接把 swift 文件拖进工程,然后使用的时候就import "项目名称-swift.h"就行,不需要桥接文件什么的,但在 xcode8 下,貌似感觉还是需要桥接文件。具体做法如下
  • 在 iOS 端下,笔画路径坐标,就直接传输字典就行,我这里字典里包括笔画的颜色,坐标点数组,笔画的宽度及屏幕的宽度等信息,图片就直接传输 base64 的,文字就直接传输字符串,但要注意和 web 端的 socket.io 的区别,具体代码可参考 demo 链接
  • 六、小 demo 地址
  • https://github.com/HOWIE-CH/-You-guess-I-painted-_socket
  • 七、其他
  • 使用 socket.io,感觉传输数据很方便,api 简单,也没有像 GCDAsyncSocket 传输数据会出现掉包的现象
  • 对于服务器,Nodejs等,我也是新手,如果自己想玩一下的话,可以租国外性价比高的 vps,然后申请域名,可以采取使用 Nginx 做主服务,使用反向代理,这样可方便绑定自己的各种二级域名了,应用服务可以使用 Nodejs 或其他,也可以自己研究下 Nginx 的负载均衡技术了。对与国外 vps 的好处,大家都知道,还可搭建自己的科学上网环境等

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 关于ionic2打包android时gradle下载不了的解决方法(附:简单优化启动速度彩蛋) - 无所事事者爱嘲笑

      关于ionic2打包android时gradle下载不了的解决方法(附:简单优化启

      2017-03-03 13:00

    • SuperWebClient -一个基于CURL的.NET HTTP/HTTPS模拟神组件(1) - ByteWorke

      SuperWebClient -一个基于CURL的.NET HTTP/HTTPS模拟神组件(1) - B

      2017-02-28 12:01

    • 基于canvas的二维码邀请函生成插件 - ppk2

      基于canvas的二维码邀请函生成插件 - ppk2

      2017-02-16 12:00

    • 【实践】基于接口的插件机制 - 悠扬的牧笛

      【实践】基于接口的插件机制 - 悠扬的牧笛

      2017-01-18 14:03

    网友点评
    "