欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2024-01-29 22:18:46
socket.io是一个基于websocket的实时通信库，在主流平台都有很好的支持，此文主要是通过一个小例子来演示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 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 = @"";
  }

}

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

上一篇： 360云盘怎么秒扩展40T容量？

下一篇： 快牙手机与电脑版在同WiFi环境无法连接的解决方法介绍

推荐阅读