Socket IO & Next

Si has tenido algún problema conectar socket io y next js , te voy a mostrar una forma sencilla de poder conectarlos, para ello vamos a hacer un pequeño proyecto con nodejs para hacer un servidor con socket.io.

      
      const app = require("express")()
const http = require("http").Server(app)
const io = require("socket.io")(http, {
  cors: { origin: "*" },
})
const cors = require("cors")

// Using cors(Cross-origin resource sharing)
app.use(cors())

// listen socket event
io.on("connection", (socket) => {
  console.log("User Connected")

  socket.on("disconnect", () => {
    console.log("User Disconnect")
  })

  socket.emit("test", "Testing from Server")
})

// listeting server
http.listen(4000, () => {
  console.log("listening on por4000")
})

Luego de que el servidor esté escuchando, podemos ir a next js para poder conectarse, para ello en un proyecto nuevo, donde vayamos a utilizar socket.io, entonces descargamos socke.io-client en el proyecto

BASH

      
      npm install socket.io-client
# or
yarn install socket.io-client

y dentro del componente donde queremos usar web sockets ponemos

JSX

      
      import { useEffect } from "react"
import io from "socket.io-client"

const Component = () => {
    ...
    useEffect(() => {
    const socket = io("URL_SERVER")
    // if is necesary for unsuscribe
    return () => {
        socket.close()
    }
    }, [])
    ...
}

usamos useEffect porque el código que se ejecute dentro de él está en el cliente por lo que no va a afectar el SSR, por lo que podría quedar de esta manera

JSX

      
      import { useEffect, useState } from "react"
import io from "socket.io-client"

const Component = () => {
  const [message, setMessage] = useState("")
  useEffect(() => {
    const socket = io("http://localhost:4000/")
    socket.on("test", (msg) => setMessage(msg))
  }, [])

  return <h1>{message}</h1>
}

con el anterior ejemplo en la vista se va a mostrar el mensaje que viene desde el servidor Testing from Server y ya estaría es más fácil de lo que parce la lógica que usamos es que el socket se conectara en el cliente si es que se usara SSR, ahora veamos un experimento con socket.io y next.js

Experimento

para este experimento vamos a poner el contexto de que queremos mejorar el rendimiento de nuestra aplicación por cuál quisiéramos conectar socket.io desde el servidor y luego mandar la instancia al cliente, así sería más rápida la conexión de esta manera

JSX

      
      import { useEffect, useState } from "react"
import io from "socket.io-client"

const Component = ({ socket }) => {
  const [message, setMessage] = useState("")

  useEffect(() => {
    socket.on("test", (msg) => setMessage(msg))
  }, [])

  return <h1>{message}</h1>
}

export const getServerSideProps = () => {
  const socket = io("http://localhost:4000/")
  return {
    props: { socket },
  }
}

estas sería la manera de realizar el experimento, lo cual nos fallaría y nos daría errores, porque la instancia de socket.io no puede ser serializado es decir que no es convertible con JSON.stringify por lo cual no puede ser pasado hacia el cliente, esto se debe a que next.js internamente cuando se va a pasar información del servidor (getServerSideProps) al cliente usa el método JSON.stringify para poder pasar los datos del servidor al cliente, por ello no se podría hacer en un proyecto. Y listo ya esta, espero que hayas aprendido como conectar NextJS y Socket.io en un proyecto

Lee más artículos