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 相关文章推荐
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 Javascript
JS实现点击掉落特效
Jan 29 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
php命名空间学习详解
2014/02/27 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
jquery 常用操作方法
2010/01/28 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
python实现列表中最大最小值输出的示例
2019/07/09 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
为什么python比较流行
2020/06/19 Python
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
运动会邀请函范文
2014/01/31 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
工会趣味活动方案
2014/08/18 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python