使用套接字进行实时通信的例子 输入输出框架

插座。IO是一个基于WebSocket的实时通信库，主流平台都很支持。本文主要演示了Socket的使用。IO通过一个小例子。

基础环境建设

创建一个新文件夹(JS项目)，创建一个package.json，复制以下内容并保存。

{ ' node ' : ' socket-chat-example '，' version' :' 0.0.1 '，' description ' : ' my first socket . ioapp '，' dependencies' : {}}然后执行npm命令安装我们需要的依赖项(Express和socket)

在package.json所在的项目根目录的终端上执行以下命令

看完npminstall的进度条-保存【邮件保护】npminstall-保存Socket。IO，还会有一个文件夹。此时已经安装了Express和socket.io，类似于iOS的Cocopods，是模块化加载的。

然后创建一个新的index.js作为服务器，一个新的index.html作为客户端。(为了演示方便，我这里有两个客户端，一个是iOS，一个是浏览器)

index.html

这也是官方演示的演示界面，UI没有修改

代码如下

！doctype htmlhtml head titleSocket。IO聊天/标题风格* { margin : 0；padd : 0；盒子尺寸：边框盒子；} body { font: 13px Helvetica，Arial}表单{ background: # 000padding: 3px位置：固定；bottom : 0；宽度： 100%；}表单输入{ border : 0；padding: 10px宽度：90%；保证金-右侧：5%；}表单按钮{ width : 9%；背景： rgb(130，224，255)；border:无；padding: 10px} # messages { list-style-type : none；margin : 0；padd : 0；} # messages li { padding: 5px 10px} # messages Li : th-child(奇数){ background: # eee}/style/head body ul id=' messages '/ul form action=' input id=' m ' autocomplete=' off '/button send/button/form/body/html index . js

var app=require(' express ')()；var http=require('http ')。服务器(app)；var io=require(' socket . io ')(http)；app.get('/'，function(req，RES){ RES . send file(_ dirname '/index . html ')；});http.listen(3000，function(){ console . log(' listien 3000 ')；});打开一个Server，监听端口3000，然后返回项目根目录，在终端输入node index.js

如果出现listen 3000，则表明服务已成功启动。此时，您可以通过在浏览器中访问http://localhost:3000来查看index.html页面

IOS客户端集成

创建一个新的iOS项目，并创建一个从终端cd到项目根目录的Podfile文件

vim Podfile

复制以下内容

使用框架！目标' socket io _ chat _ example ' do # project name pod ' socket . io-client-swift '，' ~ 8.2.0 '结束保存并退出，执行命令安装依赖项

pod安装或pod安装-详细-无报告-更新

确保你已经有一个椰子的环境

iOS端的用户界面

使用套接字。超正析象管(Image Orthicon)

此时，我们的客户端和服务器都有Socket。IO环境，然后我们用它来聊天。

套接字中的事件处理。IO主要通过这两种方式实现

在(_ event:字符串，回调：正常回调)上发出(_ event3360字符串，_ items: anyobject.)on方法是接收事件的方法，emit是发送事件的方法

我们的需求是让浏览器和iOS客户端进行单一聊天

服务器端的处理

要发送到指定的客户端，我们需要知道当前客户端的Id(Socket。IO id，例如：3t60BArlK47a2fA-AAAd)，但是客户端不清楚，客户端只知道我们自己定义的id，所以我们需要绑定并存储Socket。输入输出标识与我们自己定义的标识。

var socketArray=新数组();io.on('connection '，function(socket){ var islogin=false；控制台。日志(' * * * * * * * * * * *新加入了一个用户*******，套接字。id)；socket.on('login ')，函数(userId) { if(islogin)返回；socket . userid=useridsocketarray . push(套接字);islogin=true })；socket.on('privateMessage '，函数（数据){ console.log(数据);}) socket.on('chat message '，函数(data){ var to=data。touservar message=data . message for(var I=0；isocketarray . lengthi){ var receive data=SocketArray[I]；if(接收数据。userid==to){ io。接收数据。socket tid]).发出(' privateMessage '，' receiveData.userId ':'消息);} } });socket.on('disconnect '，function(){ console。日志(' * * * * * * * * * * *用户退出登陆********* '套接字。id)；})});客户端的处理

浏览器的处理

脚本src=' http :/socket。io/套接字。io。js '/script script src=' http :http://代码。jquery。com/jquery-1。11 .1 .js '/script脚本var socket=io()；socket.emit('login '，' 30621 ')；$(“表单”).submit()函数(){ socket。发出('聊天消息'，{'toUser':'30342 '，' message':$('#m ').val()})；$('#m ').val(" ")；返回false })；socket.on('聊天消息，函数(消息){ $(' #消息').追加($('li ').文本（消息));});socket.on('privateMessage '，函数(消息){ $(' #消息').追加($('li ').文本（消息));});/scriptiOS端的处理

ios在初始化的时候需要一个配置字典，配置可以配置诸如原木日志输出等设置

-(SocketClient *)客户端{ if(！_ client){ NSURL * URL=[[NSURL alloc]初始化： @ ' http://localhost :3000 ']；_ client=[[Socketiocent alloc]initwithsocketurl : URl config : @ { @ ' log ' : @ YES，@ ' force polling ' : @ YES }]；} return _ client}-(无效)连接{[自我。客户端： @“连接”callback:^(nsarray*数据，socketackeemitter * ack){ nslog(@ ' * * * * * * * * * * * \ n \ NIOS客户端上线\ n \ n * * * * * * * * * * * *)；[自我。客户端发出： @ '登录'时使用： @[@ ' 30342 ']；}];[自我。客户端： @ '聊天消息callback:^(nsarray * _非空事件，socketackeemitter * _ non null ack){ if(事件[0]![事件[0]isequaltostring : @ ' ']){[self。messagearray insertobject :事件[0]在索引：0处]；[自我。messagetableview insertrowstindexpath 3360 @[[行：0的NSIndexPath indexpath检查：0]]，带有rowaimitation : uitableviewprowaimitaop]；} }];[自我。客户端： @“私人消息”callback:^(nsarray * _非空事件，socketackeemitter * _ non null ack){ if(事件[0]！[事件[0]isequaltostring : @ ' ']){[self。messagearray insertobject :事件[0]在索引：0处]；[自我。messagetableview insertrowstindexpath 3360 @[[行：0的NSIndexPath indexpath检查：0]]，带有rowaimitation : uitableviewprowaimitaop]；} }];[自我。客户端： @“断开”callback:^(nsarray * _非空事件，socketackeemitter * _ non null ack){ nslog(@ ' * * * * * * * * * * * * * \ n \ NIOS客户端下线\ n \ n * * * * * * * * * * * % @ '，事件？事件[0]: @ ' ');}];[自我。客户端： @“错误”callback:^(nsarray * _非空事件，socketackeemitter * _ non null ack){ nslog(@ ' * * * * * * * * * * * \ n \ n % @ \ n * * * * * * * * * * * *，事件？事件[0]: @ ' ');}];[自我。客户端连接]；}//按钮点击事件-(ibaaction)sendmail :(id)发件人{ if(self。输入视图。文字。长度0){[self。客户端发出： @ '聊天消息'带有： @[@ { @ ' toUser ' : @ ' 30621 '，@ ' message ' : self。输入视图。文本}]；[自我。message array insert object : self。输入视图。索引：0处的文本]；[自我。messagetableview insertrowstindexpath 3360 @[[行：0检查：0的NSIndexPath索引路径]]，带有rowaimitation : uitableview rowaimitation op]；自我。输入视图。text=@}}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。