iOS + node.js使用Socket.IO框架進(jìn)行實(shí)時(shí)通信示例

更新時(shí)間：2017年04月14日 10:09:52 作者：mirrorZyb

本篇文章主要介紹了iOS + node.js使用Socket.IO框架進(jìn)行實(shí)時(shí)通信示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

Socket.IO是一個(gè)基于WebSocket的實(shí)時(shí)通信庫(kù)，在主流平臺(tái)都有很好的支持，此文主要是通過(guò)一個(gè)小例子來(lái)演示Socket.IO的使用。

基礎(chǔ)環(huán)境搭建

新建一個(gè)文件夾（JS工程），創(chuàng)建一個(gè)package.json，復(fù)制以下內(nèi)容并保存。

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

然后執(zhí)行npm命令，安裝我們需要的依賴（Express和Socket.IO），請(qǐng)確保你電腦已經(jīng)有node環(huán)境

在項(xiàng)目根目錄也就是package.json所在的目錄在終端執(zhí)行以下命令

npm install --save express@4.10.2

npm install --save socket.io

進(jìn)度條讀完后會(huì)多這么一個(gè)文件夾，此時(shí)Express和Socket.IO就已經(jīng)安裝好了，這和iOS的Cocopods差不多，以模塊化進(jìn)行加載。

然后新建一個(gè)index.js作為服務(wù)端，再建一個(gè)index.html作為客戶端。（為了方便演示，我這里有兩個(gè)客戶端，一個(gè)是iOS端，一個(gè)是瀏覽器端）

index.html

這也是官方Demo的演示界面，UI上沒(méi)做修改

代碼如下

<!doctype html>
<html>
 <head>
  <title>Socket.IO chat</title>
  <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body { font: 13px Helvetica, Arial; }
   form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
   form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
   form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
   #messages { list-style-type: none; margin: 0; padding: 0; }
   #messages li { padding: 5px 10px; }
   #messages li:nth-child(odd) { 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').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');
});

開(kāi)啟了一個(gè)Server，監(jiān)聽(tīng)3000端口，然后回到項(xiàng)目根目錄，在終端輸入node index.js

如果出現(xiàn)listen 3000則表明服務(wù)開(kāi)啟成功了，此時(shí)在瀏覽器訪問(wèn)http://localhost:3000 就能看到index.html頁(yè)面了

iOS客戶端的集成

新建一個(gè)iOS工程，在終端cd到項(xiàng)目根目錄創(chuàng)建一個(gè)Podfile文件

vim Podfile

復(fù)制以下內(nèi)容

use_frameworks!

target 'SocketIO_Chat_Example' do #項(xiàng)目名
  pod 'Socket.IO-Client-Swift', '~> 8.2.0'
end

保存退出，執(zhí)行命令安裝依賴

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

請(qǐng)確保已經(jīng)有cocopods環(huán)境

iOS端的UI

使用Socket.IO

此時(shí)我們的客戶端和服務(wù)端都已經(jīng)有了Socket.IO的環(huán)境了，接下來(lái)就是使用它進(jìn)行聊天了。

Socket.IO中事件的處理主要通過(guò)這兩個(gè)方法來(lái)實(shí)現(xiàn)的

on(_ event: String, callback: NormalCallback)

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

on方法為接收事件的方法，emit為發(fā)送事件的方法

我們的需求是讓瀏覽器和iOS客戶端進(jìn)行單聊

服務(wù)端的處理

要想發(fā)送到指定的客戶端，需要知道當(dāng)前客戶端的id（Socket.IO的id，例：3t60BArlK47a2fA-AAAd），但是客戶端并不清楚，客戶端只知道我們自己定義的id,所以我們要將Socket.IO的Id和我們自己定義的id綁定并存儲(chǔ)起來(lái)。

var socketArray = new Array();

io.on('connection', function(socket){
  var islogin = false;
  console.log('**********新加入了一個(gè)用戶*********',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);
  })
});

客戶端的處理

瀏覽器的處理

<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  var socket = io();
  socket.emit('login','30621');
  $('form').submit(function(){
    socket.emit('chat message',{'toUser':'30342','message':$('#m').val()} );
    $('#m').val('');
    return false;
  });
  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
  socket.on('privateMessage',function (msg) {
    $('#messages').append($('<li>').text(msg));
  });
</script>

iOS端的處理

iOS在初始化的時(shí)候需要一個(gè)config字典，config可以配置諸如log日志輸出等設(shè)置

- (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];

}
//按鈕點(diǎn)擊事件
- (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 = @"";
  }

}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: