Breaking News: Grepper is joining You.com. Read the official announcement!

nextjs socket.io

tam11a answered on April 15, 2022 Popularity 10/10 Helpfulness 5/10

answer nextjs socket.io

related next js socket.io

nextjs socket.io

Comment

/*
Install SocketIO for Creating Server
npm i socket.io

Install SocketIO-Client for Creating Client 
npm i socket.io-client
*/

// Socket Server
// pages/api/socket.js ------------------------------
import { Server } from 'socket.io'

const SocketHandler = (req, res) => {
  if (res.socket.server.io) {
    console.log('Socket is already running')
  } else {
    console.log('Socket is initializing')
    const io = new Server(res.socket.server)
    res.socket.server.io = io

    io.on('connection', socket => {
      socket.on('input-change', msg => {
        socket.broadcast.emit('update-input', msg)
      })
    })
  }
  res.end()
}

export default SocketHandler
// --------------------------------------------------

// Socket Client
// pages/home.js -----------------------------------
import { useEffect, useState } from 'react'
import io from 'socket.io-client'
let socket;

const Home = () => {
  const [input, setInput] = useState('')

  useEffect(() => {
      socketInitializer();
      return () => {
        console.log("This will be logged on unmount");
      }
    })

  const socketInitializer = async () => {
    await fetch('/api/socket');
    socket = io()

    socket.on('connect', () => {
      console.log('connected')
    })

    socket.on('update-input', msg => {
      setInput(msg)
    })
  }

  const onChangeHandler = (e) => {
    setInput(e.target.value)
    socket.emit('input-change', e.target.value)
  }

  return (
    <input
      placeholder="Type something"
      value={input}
      onChange={onChangeHandler}
    />
  )
}

export default Home;
// ----------------------------------------------

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript socket.io

Link to this answer
Share Copy Link

Contributed on Apr 15 2022

tam11a

0 Answers Avg Quality 2/10

Closely Related Answers

next js socket.io

Comment

-1

//SERVER
import { Server } from 'Socket.IO'
import EventEmitter from 'events'

const SocketHandler = (req, res) => {
  //   const emiter = new EventEmitter()
  //   emiter.setMaxListeners(20)
  if (res.socket.server.io) {
    console.log('First use, starting socket.io')
  } else {
    console.log('Socket Connected Server')
    const io = new Server(res.socket.server)
    res.socket.server.io = io

    //
    io.on('connection', socket => {
      socket.on('send-message', data => {
        if (data.room) {
          socket.to(data.room).emit('receive-message', data.message)
        } else {
          socket.broadcast.emit('receive-message', data.message)
        }
      })

      socket.on('join-room', data => {
        socket.join(data)
      })
    })
  }
  res.end()
}

export default SocketHandler



//CLIENT

import io from 'Socket.IO-client'

const chat = () => {
  useEffect(() => {
    socketInitializer()
  }, [])

  const [input, setInput] = useState('')
  const [room, setRoom] = useState('')
  const [text, setText] = useState('')

  const socketInitializer = async () => {
    await fetch('/api/socket')
    socket = io()

    socket.on('connect', () => {
      console.log('connected Client')
    })

    socket.on('receive-message', (msg: any) => {
      setText(msg)
      console.log('something happened')
    })
  }

  const onChangeHandler = (e: any) => {
    socket.emit('send-message', { message: input, room })
  }

  const joiningRoom = (e: any) => {
    socket.emit('join-room', room)
  }

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 27 2023

Readul Ahmed

0 Answers Avg Quality 2/10

nextjs socket.io

Contents

More Related Answers

nextjs socket.io

Closely Related Answers

next js socket.io

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.