Socket IO

Pre-Action

Server Side (NodeJS Express)

npm install socket.io

Client Side (React)

npm install socket.io-client

Connect

Client Side

• When user enter the chatroom, the connection should be done and do it in the componentDidMount

import io from "socket.io-client";
const Chatroom = ()=>{
    // const [ws,setWs] = useState(io(`Your API Site`)); Don't do this
    const [ws,setWs]= useState(null);
    useEffect(()=>{
        setWs(io(`Your API SITE`));
    },[])
}

• Remember not to do it in useState !!!!

Server Side

• When new user is connected, new connection will be triggered !!!

• Then we can implement the logic within connection scope

const socketio = require("socket.io");
const http = require("http");
const app = express();

const server = http.createServer(app);
const io = socketio(server);

io.on("connection", (socket) => {
  console.log("new connection");
   
   ...
   
  }
)

Send and Receive Message

Send(Client)

ws.emit("sendMessage", { userId, text });

• From above the example: client send an object which includes userId and text , and bookmark it as sendMessage

Receive (Server)

socket.on("sendMessage", ({ userId, text }) => {
    ...
}

• The server can receive userId and text based on the bookmark, and can do callback function, such as send the message back to client

Sent(Server)

 // send back to a client who send the message
 socket.emit('getMessage', {userId,text});
 
 // send to all clients who connect to socketio
 io.sockets.emit('getMessage', {userId,text})
 
 // send to all clients except a client who send message
 socket.broadcast.emit('getMessage',{userId,text})
 
 

• The server send the object to client/clients which is bookmarked as getMessage

Receive(Client)

ws.on("getMessage", ({userId,text}) => {
  ...
});

Client can receive userId and text based on the bookmark, and can do callback function

Room

Join Room

• At the beginning, we should send the room information and user information ,such as room name, user Id

 useEffect(() => {
    console.log("join", name);
    ws.emit("join", { room_name, userId, username });
  }, []);

• After the server receive the info, it will divide user into different information based room name or other information

 socket.on("join", ({ room_name, userId, username }) => {
      socket.join(.room_name);
  });

Send Message to Room

• After divided user into different groups, server can choose to send message to clients in the specific groups

socket.on("test",({test})=>{
// send to the clients in room A except the the client who send test 
    socket.to("room A").emit('msg', 'Welcome to Group A');
// send to all clients in room A
    io.sockets.in("room A").emit("msg", {
        username: "admin",
        userId: 0,
        text: `Welcome to Group A`,
    });
}

• Server send message to all client in Group A which is bookmarked as msg, so client in group B cannot receive

Quit Room

• Firstly, the client request to quit room by sending message to server

 ws.emit("quitRoom", { roomInfo },({msg})=>{
  if(msg==="success")
   console.log("quited");
 });

• Then, after the server receive the message , it will do leaving action

socket.on("quitRoom", ({ roomInfo }, callback) => {
    socket.leave(roomInfo);
    callback({msg:"success"});
});

Disconnect

Client Side

• Firstly, disconnect the connection in client side

ws.close();

Server Side

• After the disconnection of client side, it can be detected by server side

io.on("connection", (socket) => {
    socket.on("disconnect", () => {
        console.log("Disconnected");
  });
})

• If disconnection is triggered, Disconnected will be printed out automatically