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

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

基础环境搭建

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

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

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

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

npm install --save [email protected]

npm install --save socket.io

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

iOS + node.js使用Socket.IO框架进行实时通信_第1张图片
node_modules

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

index.html

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

iOS + node.js使用Socket.IO框架进行实时通信_第2张图片
index.html

代码如下



  
    Socket.IO chat
    
  
  
    

    index.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

    复制以下内容

    use_frameworks!
    
    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

    iOS + node.js使用Socket.IO框架进行实时通信_第3张图片
    iOS

    使用Socket.IO

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

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

    on(_ event: String, callback: NormalCallback)

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

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

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

    服务端的处理

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

    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

    客户端的处理

    浏览器的处理

    
    
    
    

    iOS端的处理

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

    - (SocketIOClient *)client{
        if (!_client) {
            NSURL* url = [[NSURL alloc] initWithString:@"http://localhost:3000"];
            _client = [[SocketIOClient alloc] initWithSocketURL:url config:@{@"log": @YES, @"forcePolling": @YES}];
            
        }
        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 = @"";
        }
        
    }
    
    

    github地址

    你可能感兴趣的:(iOS + node.js使用Socket.IO框架进行实时通信)