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

下面是“iOS + node.js使用Socket.IO框架进行实时通信示例”的完整攻略。

背景介绍

Socket.IO 是一种实现实时、双向、可靠、基于事件的通信方式的 JavaScript 库。在本教程中，我们将使用 Socket.IO 框架实现 iOS 应用程序与 node.js 服务器之间的实时通信。

步骤1：创建node.js服务器

首先，我们需要在本地创建一个 node.js 服务器。

1.1 安装node和npm

在开始之前，我们需要为电脑安装 node.js 和 npm。

你可以在 node.js官网下载并安装 Node.js 和 npm。

1.2 创建新项目

在本地创建一个新的文件夹，例如 socket-io-demo，使用终端进入该文件夹，并执行以下命令：

npm init

在同一目录下，使用以下命令安装socket.io和express.js：

npm install socket.io express --save

然后，在 socket-io-demo 文件夹下创建一个名为 index.js 的文件，以编写我们的服务器代码。

1.3 编写node.js服务器

在 index.js 文件中，我们需要引入 socket.io 和 express 模块。首先，我们先创建 express 应用程序：

var express = require('express');
var app = express();

然后，我们可以使用以下代码初始化我们的 socket.io 服务器：

var http = require('http').Server(app);
var io = require('socket.io')(http);

现在，我们已经创建一个 socket.io 服务器，并可以开始监听事件。在本示例中，我们将为 connection 事件加入监听：

io.on('connection', function(socket) {
  console.log('A user connected!');
});

在我们将来的示例中，我们将通过监听 chat message 事件来获取客户端发送的消息：

socket.on('chat message', function(msg) {
  console.log('Message: ' + msg);
});

完整的代码如下所示：

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket) {
  console.log('A user connected!');

  socket.on('disconnect', function() {
    console.log('A user disconnected!');
  });

  socket.on('chat message', function(msg) {
    console.log('Message: ' + msg);
  });
});

http.listen(3000, function() {
  console.log('Server started on port 3000!');
});

步骤2：创建iOS客户端

在本教程中，我们将使用 Xcode 创建我们的 iOS 应用程序。首先，我们需要打开 Xcode，并创建一个新的 iOS 项目。

2.1 创建新项目

打开 Xcode，从菜单栏中选择 “File” > “New” > “Project”：

选择 "Application" > "Single View Application"。
为您的应用程序命名，并选择您首选的位置。
选择目标设备和最低 iOS 版本。

2.2 安装 Socket.IO-Client-Swift 库

现在，我们已经创建了我们的 iOS 应用程序，我们需要使用 Socket.IO-Client-Swift 库来实现与我们的 node.js 服务器通信。

使用 CocoaPods 安装：

在终端中进入您的项目目录，并输入以下命令：

pod init

现在，打开您的 Podfile 并添加以下行：

pod 'Socket.IO-Client-Swift'

通过运行以下命令安装库：

pod install

现在，打开您的项目 .xcworkspace 文件并开始编写代码。

2.3 编写iOS客户端

在您的 iOS 项目中，打开 ViewController.swift 文件。首先，按照以下代码导入 SocketIO 库：

import SocketIO

然后，声明一个名为 socket 的 SocketIOClient 变量：

let socket = SocketIOClient(socketURL: NSURL(string: "http://localhost:3000")!)

如果您的服务器在其他位置，请使用相应的 URL 替换 “http://localhost:3000”。

接下来，我们可以通过以下代码连接到 socket.io 服务器：

socket.connect()

在与服务器连接之后，我们可以发送消息并处理从服务器收到的事件。在我们的第一个示例中，我们将发送一个简单的 'hello' 消息并处理服务器回应：

socket.emit("hello", "world")
socket.on("hello", callback: { (data, ack) -> Void in
  print(data[0])
})

完整的代码如下所示：

import UIKit
import SocketIO

class ViewController: UIViewController {

  let socket = SocketIOClient(socketURL: NSURL(string: "http://localhost:3000")!)

  override func viewDidLoad() {
    super.viewDidLoad()

    socket.on("connect") {data, ack in
      print("Socket connected!")
      self.socket.emit("hello", "world")
    }

    socket.on("hello") {data, ack in
      print(data[0])
    }

    socket.connect()
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
  }

}

现在，我们已经完成了一个简单的示例，iOS 应用程序可以使用 Socket.IO 库与我们的 node.js 服务器通信。

示例2：聊天室示例

在我们的第二个示例中，我们将使用 socket.io 库创建一个名为“聊天室”的示例应用程序。用户通过应用程序可以发送消息给聊天室，并实时更新屏幕上的消息。

步骤1：服务器端

首先，让我们相应的更新我们的服务器端代码，用于存储和广播用户发送的消息。

1.1 用户加入聊天室

更新服务器端的 connection 事件监听器，以便将用户的 socket 对象存储在我们的 users 数组中，并向所有其他用户广播“用户已加入聊天室”的消息：

io.on('connection', function(socket) {
  console.log('A user connected!');

  users.push(socket);
  io.emit('user joined', 'A user joined the chat room!');
});

1.2 用户离开聊天室

更新服务器端的 disconnect 事件监听器，以便从我们的 users 数组中删除用户并向所有其他用户广播“用户已离开聊天室”的消息：

socket.on('disconnect', function() {
  console.log('A user disconnected!');

  var index = users.indexOf(socket);
  if (index != -1) {
    users.splice(index, 1);
  }

  io.emit('user left', 'A user left the chat room!');
});

1.3 处理用户发送的消息

为了处理来自客户端的消息，我们将创建一个名为 chat message 的事件监听器。当我们收到一个来自客户端的 chat message 事件时，我们将广播来自该用户的消息给所有连接到我们的服务器的客户端：

socket.on('chat message', function(msg) {
  console.log('Message: ' + msg);

  io.emit('chat message', msg);
});

1.4 完整代码

下面是更新后的服务器端代码，包含上面提到的所有更改：

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

var users = [];

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket) {
  console.log('A user connected!');

  users.push(socket);
  io.emit('user joined', 'A user joined the chat room!');

  socket.on('disconnect', function() {
    console.log('A user disconnected!');

    var index = users.indexOf(socket);
    if (index != -1) {
      users.splice(index, 1);
    }

    io.emit('user left', 'A user left the chat room!');
  });

  socket.on('chat message', function(msg) {
    console.log('Message: ' + msg);

    io.emit('chat message', msg);
  });
});

http.listen(3000, function() {
  console.log('Server started on port 3000!');
});

步骤2：客户端

现在，让我们更新我们的 iOS 应用程序，以创建一个与服务器通信的聊天室。我们需要展示所有的聊天消息，让用户可以输入自己的消息，并通过 Socket.IO 发送给服务器。

在 ViewController.swift 文件中，我们添加一个表示聊天消息的字符串数组：

var messages = [String]()

接下来，我们可以使用 UITableView 将这些消息显示在屏幕上。首先，在故事板中向视图控制器添加一个 UITableView，并在该视图控制器中添加以下代码：

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  return messages.count
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  let cell = UITableViewCell(style: .Default, reuseIdentifier: "MessageCell")
  cell.textLabel?.text = messages[indexPath.row]
  return cell
}

现在，让我们添加一个输入框和一个发送按钮，以便用户可以向聊天室发送消息。在 storyboard 中，向视图控制器添加一个 UITextField，并将其拖到视图控制器中。

接下来，在 ViewController.swift 文件中，为 TextField 和 “Send” 按钮添加 IBOutlet 和 IBAction：

@IBOutlet weak var textField: UITextField!
@IBAction func sendButtonTapped(sender: AnyObject) {
  if let text = textField.text where !text.isEmpty {
    socket.emit("chat message", text)
    textField.text = ""
  }
}

最后，让我们通过 socket.io 监听器，从服务器监听任何传入的聊天消息：

socket.on("chat message") { (data, ack) -> Void in
  if let message = data[0] as? String {
    self.messages.append(message)
    self.tableView.reloadData()
  }
}

完整的代码如下所示：

import UIKit
import SocketIO

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

  @IBOutlet weak var textField: UITextField!
  @IBOutlet weak var tableView: UITableView!

  let socket = SocketIOClient(socketURL: NSURL(string: "http://localhost:3000")!)
  var messages = [String]()

  override func viewDidLoad() {
    super.viewDidLoad()

    tableView.dataSource = self

    socket.on("connect") {data, ack in
      print("Socket connected!")
    }

    socket.on("chat message") { (data, ack) -> Void in
      if let message = data[0] as? String {
        self.messages.append(message)
        self.tableView.reloadData()
      }
    }

    socket.connect()
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
  }

  func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return messages.count
  }

  func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = UITableViewCell(style: .Default, reuseIdentifier: "MessageCell")
    cell.textLabel?.text = messages[indexPath.row]
    return cell
  }

  @IBAction func sendButtonTapped(sender: AnyObject) {
    if let text = textField.text where !text.isEmpty {
      socket.emit("chat message", text)
      textField.text = ""
    }
  }

}

结论

通过本教程，我们已经学习了如何使用 Socket.IO 框架实现 iOS 应用程序与 node.js 服务器之间的实时通信，并为您提供了两个示例：一个简单的 “hello world” 示例和一个名为 “聊天室” 的实时聊天示例。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：iOS + node.js使用Socket.IO框架进行实时通信示例 - Python技术站

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

背景介绍

步骤1：创建node.js服务器

步骤2：创建iOS客户端

示例2：聊天室示例

步骤1：服务器端

步骤2：客户端

结论

相关文章