socket.io api,socket.io.js
1.简介socket.io实现了基于事件的实时双向通信机制，基于webSocket封装。但它不仅包含webSocket，还将轮询机制等实时通信方式封装到一个通用接口中，在服务器端实现这些实时机制的对应代码socket.io是跨平台的。可以实现多平台即时通讯。因为iOS上的socket编程主要使用GCDAsyncSocket框架，所以最好选择统一的框架或协议来实现Android、iOS、web之间的多平台通信。基本api，使用socket.on监控传入数据，使用socket.emit发送数据。第二，这个例子说明了服务器使用Nodejs启动本地服务，统一使用socket.io进行iOS和web的即时通信，从而简单的实现了和你猜测的差不多的数据传输效果。
第三，服务器端使用express进行简单构造，设置模板引擎，静态服务。新手会遇到坑，这就是路径问题。通常，__dirname用于拼接绝对路径//模板引擎。
app.set(views ，path.join(__dirname，/views/))；
app.set(视图引擎， ejs )；
//静态服务
app . use(express . static(path . join(_ _ dirname，/public/))；
app.use(/upload ，express . static(path . join(_ _ dirname，/upload/))；Socket.io用于监控Socket数据和广播数据，这是服务器主要做的事情。在这个例子中，传输的数据和格式是自定义的，有三种，一种是画笔画的路径，传输一系列坐标点，一种是图像(img)，一种是base64字符串，一种是文本，传输字符串var http=
var io=require( socket . io )(http)；
io.on(连接，功能插座){
console.log(“一个客户端已连接”)；
//如果连接成功，给自己发一条空消息，回叫。
socket.emit(connection ，null)；
//路径
socket.on(path ，functionmsg) {
socket.broadcast.emit(path ，msg)；
});
//img
socket.on(img ，functionmsg) {
socket.broadcast.emit(img ，msg)；
});
//文本
socket.on(text ，functionmsg) {
//给自己以外的所有其他套接字广播
socket.broadcast.emit(text ，msg)；
//广播到所有套接字，包括我自己
//io.emit(text ，msg)；
});
});四。web上笔画的传输：使用canvas，进行画板的相关操作，并保存所有路径的坐标，然后通过socket进行传输。//画布绘制。
//获取画布htmlElement
//var canvas=document . getelementbyid( canvas )；
var canvas=$(#canvas )。get(0)；
//创建上下文
var CTX=canvas . get context( 2d )；
var colorArray=[black ， red ， blue ， green ]；
//用鼠标绘制
canvas.onmousedown=functione) {
//开始绘画
CTX . begin path()；
//ctx属性设置
CTX . line width=3；
ctx.lineCap= round
ctx.lineJoin= round
设random num=parse int(math . random()* color array . length)；
var my color=color array[random num]；
CTX . stroke style=my color；
//tmp是包含所有坐标点的数组。
var tmp=[]；
var e=e window.event
//第一个坐标点
var point={
x: e.clientX - canvas.offsetLeft，
y: e.clientY - canvas.offsetTop
}
ctx.moveTo(point.x，point . y)；
tmp.push(点)；
document . onmousemove=function e){
var e=e window.event
var point={
x: e.clientX - canvas.offsetLeft，
y: e.clientY - canvas.offsetTop
}
ctx.lineTo(point.x，point . y)；
tmp.push(点)；
CTX . stroke()；
};
document.onmouseup=function () {
document.onmousemove=null
document.onmouseup=null
//套接字发送路径
var pathDataDict={
路径：tmp，
宽度：3，
颜色：randomNum，
screenW: 400
}
socket.emit(path ，pathDataDict)；
};
};关于图像传输：由于输入type=file 无法获取本地图像路径，我们先将图像上传到服务器，然后获取图像路径，再通过canvas绘制并用canvas转换为base64，再通过socket发送出去。这里采用jquery.form框架，使用ajax异步提交表单。新手有个坑，就是表单中提交按钮的类型要设置成button，否则就是表单提交，页面会跳转$(#selImg )。单击(函数(){
//表单提交
$(#form )。ajaxSubmit({
网址：“http://127.0.0.1:5000”，
类型： post ，
数据类型： json ，
成功：函数数据){
if (data.status==-1) {
Alert(请选择要发送的图片！);
返回；
}
if (data.status==1) {
警报(“图像上传失败！”);
返回；
}
//html Dom元素
let Image=new Image()；
image . src= http://127 . 0 . 0 . 1:5000/upload/ data . status；
image.onload=function () {
ctx.drawImage(image，0，0，400，400)；
var base 64 URL=canvas . toda taurl( image/png )；
let base64=base64Url.toString()
console . log(base64 . substring(22))；
socket.emit(img ，base64 . substring(22))；
};
},
错误：函数数据){
}
});
});至于文字，很简单。直接socket发送string关于数据接收，这里有一个和iOS版socket.io的区别在iOS端，发送数据是将数据包装成数组，比如[self . client socket emit:@ text with:@[self . chattextfield . text]]；但是前端接收到的数据直接是iOS的数组中的对象，所以不需要取数组中的第一个，但是另一方面，在iOS上需要去取数组中的第一个。这里，我们简单说一下图像的接收。由于您不熟悉canvas，您只能创建一个临时的img标记来显示base64Url的图像。然后在canvas中接收img HTMLElement，绘制图片，最后删除临时img标签。如果有更好的办法，可以留个消息socket.on(img ，functionmsg) {
console . log( img )；
//base64可以直接在img中显示，获取并绘制img标签对象。
$(.曹左)。append( img id= tmp img width= 0 height= 0 src= data:image/png；base64，消息 /img
ctx.drawImage($(#tmpImg )。get(0)，0，0，400，400)；
$(#tmpImg )。移除()；
});五、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打包的框架，但是各种错误提醒我，oc之前调用swfit文件，先把swift文件直接拖到项目里，使用时再导入项目名-swift.h 。
好吧，不需要桥接文件什么的，但是在xcode8下，好像还是要桥接文件的。具体方法如下：先将一个swift文件拖入oc项目，xcode会提示创建一个桥文件。这里让xcode自动创建一个桥文件，然后把socket.io-client-swift框架源文件文件夹里剩下的所有文件都拖到oc项目里，使用时导入项目名-swift.h 。
在iOS端，笔画路径坐标可以直接传到字典。我这里的字典包括了笔画颜色、坐标点数组、笔画宽度、屏幕宽度等信息。图片可以直接传输到base64，文字可以直接传输到字符串。不过要注意在web端和socket.io的区别。具体代码请参考演示链接VI。小演示地址。
七。还有的用socket.io，方便传输数据。api简单，不会像GCDAsyncSocket那样传输数据时出现丢包现象。对于服务器、节点等。我也是新手。如果我想玩，可以租一个性价比高的国外vps，然后申请域名。可以使用Nginx作为主服务，使用反向代理。这样就方便绑定自己的二级域名了。应用服务可以用Nodejs或者其他，也可以自己研究Nginx的负载均衡技术。大家都知道和国外vps的好处，你也可以建立自己的科学上网环境。
版权归作者所有：原创作品来自博主wx 62 cd9 cc 616d 1，转载授权请联系作者，否则将追究法律责任。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。