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


Posted in Javascript onApril 14, 2017

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 express@4.10.2

npm install --save socket.io

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

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

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

index.html

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

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

代码如下

<!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');
});

开启了一个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框架进行实时通信示例

使用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<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在初始化的时候需要一个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 = @"";
  }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 #Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 #Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 #Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 #Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 #Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 #Javascript
angularjs实现首页轮播图效果
Apr 14 #Javascript
You might like
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
js 小数取整的函数
2010/05/10 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
js实现每日签到功能
2018/11/29 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python之import机制详解
2014/07/03 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python一键升级所有pip package的方法
2017/01/16 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
python 高阶函数简单介绍
2021/02/19 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
行政经理的岗位职责
2013/11/23 职场文书
采购经理岗位职责
2014/02/16 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
市场部岗位职责范本
2015/04/15 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL