Socket.io es una excelente herramienta para trabajar con WebSockets e implementar funcionalidades de tiempo real en nuestras aplicaciones tanto sean web como aplicaciones mobiles. En este caso estare realizando un ejemplo basico de el uso de Socket.io junto a una aplicación iOS hecha con swift.

Servidor – Backend

Para poder conectar nuestra aplicación iOS necesitaremos un servidor corriendo socket.io, este tutorial estaremos usando Nodejs con web para crear este servidor. 

Primero tendremos que crear nuestro backend con express y verificar que este funcionando todo bien; Primero tendremos que instalar las dependencias que estaremos usando en nuestro proyecto nodejs.

npm init --yes
npm install [email protected] --save
npm install [email protected] --save

Crearemos un archivo llamado server.js con el siguiente contenido

const app = require('express')();
const server = require('http').Server(app);

const port = 3000

app.get('/', (req, res) => res.send('Hola mundo socket.io'))

server.listen(port, () => console.log(`Running at http://localhost:${port}`))

Ejecutamos con el siguiente comandó:

node server.js

Entramos en nuestro navegador a:

http://localhost:3000

Y tendremos nuestro backend configurado correctamente.

Socket.io

Tenemos que modificar nuestro archivo server.js y agregarle las configuraciones necesarias (basicas) para socket.io

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server, {
  path: '/socket.io'
});

const port = 3000

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

app.get('/status', (req, res) => res.send('Hola mundo socket.io'))

server.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

io.on('connection', (socket) => {
  console.log('Nuevo usuario');

  socket.emit('USUARIO_RECIVIDO', {client_id: socket.client.id});
});

Hemos creado una nueva ruta `/status` que estara mostrando en pantalla nuestro ‘Hola Mundo’ y nuesta ruta ‘/’ estara deplegando un archivo html que estaremos creando.

Crear una carpeta llamada ‘public’ y dentro de esta crear un archivo llamado ‘index.html’ con el siguiente contenido:

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();

  socket.on('USUARIO_RECIVIDO', function(params) {
    alert('ID Cliente: ' + params['client_id']);
  })    
</script>

Esto es simplemente para verificar que nuestro servidor socket.io esta funcionando, este cliente cliente simplemente se conecta a nuestro servidor y muestra en un ‘alert’ el id del cliente que esta realizando la conexión a socket.io.

iOS Swift

Dado que tenemos nuestro servidor funcionando correctamente es hora de crear nuestro cliente en iOS. Sera un cliente basico que al igual que la en el archivo ‘index.html’ solo mostrar el id del socket.

Este projecto usara cocoa-pods como manejador de dependencias, si no lo tienes instalado esta guia te puede ser util:

pod init

y nuestro podfile

use_frameworks!

pod 'Socket.IO-Client-Swift', '~> 15.2.0'

luego de eso un simple

pod install

Vamos a crear una clase que se escangara de manejar nuestra conexion con nuestro servidor de socket.io

class SocketIOConnectionManager {
  let manager = SocketManager(socketURL: URL(string: "http://localhost:3000/socket.io")!)

  var socket: SocketIOClient?
  var client: SocketIOClient?
  var handler: (_: [String: Any]) -> Void

  init(eventHandler: @escaping (_: [String: Any]) -> Void) {
    self.handler = eventHandler

    manager.config = SocketIOClientConfiguration(
      arrayLiteral: .compress,
      .path("/socket.io"),
      .forceWebsockets(true)
    )
    
    socket = manager.socket(forNamespace: "/")

    socket?.on(clientEvent: .connect) {data, ack in
      print("LOG: <><><><><><> socket connected")
    }

    socket?.onAny({ (event) in
      print("LOG: {}{}{}{}{}{} Event", event)
      
      if let params = event.items?.first as? [String: Any] {
        self.handler(params)
      }
    })
  }
  
  func startListening() {
    socket?.connect()
  }
  
  func stopListening() {
    self.socket?.emit("new.auctionListing.unsubscription", completion: {
      print("LOG: Stop listening")
    })
  }
}

Nuestra clase estara encargada de manejar nuestro conexion.

Referencias

Socket IO
Server source code
ios Client Source code