微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

iOS + node.js使用Socket.IO框架进行实时通信示例

Socket.IO是一个基于WebSocket的实时通信库,在主流平台都有很好的支持,此文主要是通过一个小例子来演示Socket.IO的使用。

基础环境搭建

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

rush:js;"> { "name": "socket-chat-example","version": "0.0.1","description": "my first socket.io app","dependencies": {} }

后执行npm命令,安装我们需要的依赖(Express和Socket.IO), 请确保你电脑已经有node环境

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

rush:bash;"> npm install --save express@4.10.2

npm install --save socket.io

进度条读完后会多这么一个文件夹,此时Express和Socket.IO就已经安装好了,这和iOS的Cocopods差不多,以模块化进行加载。

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

index.html

这也是官方Demo的演示界面,UI上没做修改

代码如下

rush:xhtml;"> Socket.IO chat

index.js

rush:js;"> var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http);

app.get('/',function(req,res){
res.sendfile(__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

复制以下内容

target 'SocketIO_Chat_Example' do #项目名
pod 'Socket.IO-Client-Swift','~> 8.2.0'
end

保存退出,执行命令安装依赖

pod install or pod install --verbose --no-repo-update

请确保已经有cocopods环境

iOS端的UI

使用Socket.IO

此时我们的客户端和服务端都已经有了Socket.IO的环境了,接下来就是使用它进行聊天了。

Socket.IO中事件的处理主要通过这两个方法来实现的

rush:cpp;"> on(_ event: String,callback: normalCallback)

emit( event: String, items: AnyObject...)

on方法为接收事件的方法,emit为发送事件的方法

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

服务端的处理

要想发送到指定的客户端,需要知道当前客户端的id(Socket.IO的id,例:3t60BArlK47a2fA-AAAd),但是客户端并不清楚,客户端只知道我们自己定义的id,所以我们要将Socket.IO的Id和我们自己定义的id绑定并存储起来。

rush:js;"> var socketArray = new Array();

io.on('connection',function(socket){
var islogin = false;
console.log('**新加入了一个用户*****',socket.id);
socket.on('login',function (userId) {
if(islogin) return;
socket.userId = userId;
socketArray.push(socket);
islogin = true;

});
socket.on('privateMessage',function (data) {
console.log(data);
})
socket.on('chat message',function(data){
var to = data.toUser;
var message = data.message;
for(var i = 0;i<socketArray.length;i++){
var receiveData = socketArray[i];
if (receiveData.userId == to){
io.to([receiveData.socketId]).emit('privateMessage',''+receiveData.userId+':'+message);
}
}
});
socket.on('disconnect',function () {
console.log('***用户退出登陆****,'+socket.id);
})
});

客户端的处理

浏览器的处理

rush:js;">

iOS端的处理

iOS在初始化的时候需要一个config字典,config可以配置诸如log日志输出等设置

}
return _client;
}

  • (void)connection{

    [self.client on:@"connect" callback:^(NSArray data,SocketAckEmitter ack) {
    NSLog(@"\n\niOS客户端上线\n\n");
    [self.client emit:@"login" with:@[@"30342"]];
    }];
    [self.client on:@"chat message" callback:^(NSArray _Nonnull event,SocketAckEmitter _Nonnull ack) {
    if (event[0] && ![event[0] isEqualToString:@""]) {
    [self.messageArray insertObject:event[0] atIndex:0];
    [self.messageTableView insertRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:0 inSection:0]] withRowAnimation:UITableViewRowAnimationTop];
    }
    }];
    [self.client on:@"privateMessage" callback:^(NSArray _Nonnull event,SocketAckEmitter _Nonnull ack) {
    if (event[0] && ![event[0] isEqualToString:@""]) {
    [self.messageArray insertObject:event[0] atIndex:0];
    [self.messageTableView insertRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:0 inSection:0]] withRowAnimation:UITableViewRowAnimationTop];
    }
    }];
    [self.client on:@"disconnect" callback:^(NSArray _Nonnull event,SocketAckEmitter _Nonnull ack) {
    NSLog(@"\n\niOS客户端下线\n\n%@",event?event[0]:@"");
    }];
    [self.client on:@"error" callback:^(NSArray _Nonnull event,SocketAckEmitter _Nonnull ack) {
    NSLog(@"\n\n%@\n\n",event?event[0]:@"");
    }];
    [self.client connect];

}
//按钮点击事件

  • (IBAction)sendMessage:(id)sender {
    if (self.inputView.text.length>0) {

    [self.client emit:@"chat message" with:@[@{@"toUser":@"30621",@"message":self.inputView.text}]];
    [self.messageArray insertObject:self.inputView.text atIndex:0];
    [self.messageTableView insertRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:0 inSection:0]] withRowAnimation:UITableViewRowAnimationTop];
    self.inputView.text = @"";
    }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文地址:https://www.jb51.cc/nodejs/39961.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐