js import express,{ Request,Response } from "express"; import { Server } from "socket.io"; import { createServer } from "http"; import { addUser, checkUserNameExists,removeUser} from './utils/usersutil'; import { makeTimeStamp } from './utils/utils';

// const express = require('express');

const cors = require('cors'); const bodyParser = require('body-parser')

const app = express();

const PORT = process.env.PORT||4000 const server = createServer(app); // const httpServer = createServer(app); var jsonParser = bodyParser.json() // create application/x-www-form-urlencoded parser // var urlencodedParser = bodyParser.urlencoded({ extended: false })

const io = new Server(server,{ cors: { origin: "http://localhost:3000", credentials: true, allowedHeaders: ["my-custom-header"],

} });

(async () => {

app.use(cors()) app.options('*', cors());

app.get('/', (req:Request, res:Response) => { res.send({ message: "We did it!" }) });

app.get('/me', (req:Request, res:Response) => { res.send({ message: "smoosh" }) });

app.post('/users',jsonParser,(req:Request, res:Response) => {

const user = req.body?.user.username // //console.log("looking for ===== ",user) const userExists = checkUserNameExists(user) //console.log("looking for ===== ",user, userExists) res.send({data:userExists}) });

io.on("connection", async(socket) => {

//console.log(Client ${socket.id} connected);

// Join a conversation const { room,user } = socket.handshake.query; const room_id = room as string const user_count = addUser({id:socket.id,name:user,room}) // //console.log("room id / user==== ",room_id,user,user_count) socket.join(room_id); io.in(room_id).emit('room_data', {room,users:user_count}); const join_room_message={message:${user} joined, time:makeTimeStamp(), user:"server" } io.in(room_id).emit('new_message_added', { user,newMessage:join_room_message});

socket.on('new_message', (newMessage) => { //console.log("new message ",newMessage,room_id) const user = newMessage.user //@ts-ignore io.in(room_id).emit('new_message_added', { user: user?.name,newMessage});

})

socket.on("disconnect", () => { //console.log("User Disconnected new user count ====", socket.id,user_count); removeUser(socket.id) io.in(room_id).emit('room_data', {room: room_id,users:user_count - 1 }); const join_room_message={message:${user} left, time:makeTimeStamp(), user:"server" } io.in(room_id).emit('new_message_added', { user,newMessage:join_room_message}); }); });

server.listen(PORT, () => { console.log(listening on http://localhost:${PORT}) });

})().catch(e=> console.log('error on server ====== ',e) )

js interface User{ id:string name:string room:string
} const users:User[] = [];

const userExists=(users:User[],name:string)=>{ let status = false
for(let i = 0;i<users.length;i++){ if(users[i].name===name){ status = true; break } } return status; }

//console.log("all users in list=== ",users)

export const addUser = ({id, name, room}) => { name = name?.trim().toLowerCase(); room = room?.trim().toLowerCase();


//console.log("user to add ==== ",name)

const existingUser = userExists(users,name) //console.log("existing user????====",existingUser) if(existingUser) { //console.log("existing user") return users.length; }else{ const user = {id,name,room}; //console.log("adding user === ",user) users.push(user); //console.log("all users === ",users) const count = getUsersInRoom(room).length return count }


}

const userExistsIndex=(users:User[],id:string)=>{ let status = -1
for(let i = 0;i<users.length;i++){ if(users[i].id === id){ status = i; break } } return status; }

export const checkUserNameExists=(name:string)=>{ let status = false
for(let i = 0;i<users.length;i++){ if(users[i].name === name){ status = true break } } return status; }

export const removeUser = (id:string) => { // const index = users.findIndex((user) => { // user.id === id // }); const index = userExistsIndex(users,id) //console.log(index) if(index !== -1) { //console.log("user ",users[index].name ,"disconected , removing them") return users.splice(index,1)[0]; }

}

export const getUser = (id:string) => users .find((user) => user.id === id);

export const getUsersInRoom = (room:string) => users.filter((user) => user.room === room);

export const userCount =()=>users.length

js export const makeTimeStamp=()=>{

const hour = new Date(Date.now()).getHours()
const min = new Date(Date.now()).getMinutes() const sec = new Date(Date.now()).getSeconds()

let mins= min+'' let secs=':'+sec if(min<10){ mins = '0'+ min }

if(sec<10){ secs = '0' + sec }

return hour+':'+ mins + secs }

js npm run watch npm start

ts export type Chat ={ newMessage:{message: string; time: string,user:string }}; export interface User{username:string ; room:string} export interface Room{users:number ; room:string} export interface Message{ message: string; time: string; user: string; }

js mport React from 'react'; import { User } from './../App';

const user_data = { user:{username:"",room:"general"}, updateUser:(user:User)=>{}}

const UserContext = React.createContext(user_data); export default UserContext;

js import { Room, User } from "./types" import { useRef,useState,useEffect } from 'react'; import socketIOClient,{ Socket } from 'socket.io-client';

const NEW_MESSAGE_ADDAED = "new_message_added"; const ROOM_DATA = "room_data";

const devUrl="http://localhost:4000"

const useChats=(user:User)=>{

const socketRef = useRef<Socket>(); const [messages, setMessages] = useState<any>([]); const [room, setRoom] = useState<Room>({users:0,room:""});

useEffect(() => { socketRef.current = socketIOClient(devUrl, { query: { room:user.room,user:user.username }, transports: ["websocket"], withCredentials: true, extraHeaders:{"my-custom-header": "abcd"}

})

socketRef.current?.on(NEW_MESSAGE_ADDAED, (msg:any) => { // //console.log("new message added==== ",msg) setMessages((prev: any) => [msg,...prev]); });

socketRef.current?.on(ROOM_DATA, (msg:any) => { //console.log("room data ==== ",msg) setRoom(msg)});

return () => {socketRef.current?.disconnect()}; }, [])

const sendMessage = (message:any) => { //console.log("sending message ..... === ",message) socketRef.current?.emit("new_message", message) };

return {room,messages,sendMessage} } export default useChats

js import { JoinRoom } from './components/JoinRoom'; import React from 'react' import UserContext from "./utils/context"; import { Chats } from './components/Chats';

export interface User{username:string ; room:string}

let the_user:User const user_room= localStorage.getItem("user-room"); if(user_room) the_user = JSON.parse(user_room);

function App() {

const [user, setUser] = React.useState<User>(the_user); const updateUser = (new_user:User) => {setUser(new_user)}; const user_exists = user && user.username !==""

return (
<div className="scroll-bar flex flex-col justify-between h-screen w-screen ">

<UserContext.Provider value ={{user,updateUser}}> {user_exists?<Chats />:<JoinRoom/>}
</UserContext.Provider>

</div>
); }

export default App;

css @tailwind base; @tailwind components; @tailwind utilities;

body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; }

.flex-center{ @apply flex justify-center items-center }

.flex-center-col{ @apply flex flex-col justify-center items-center } .scroll-bar{ @apply scrollbar-thin scrollbar-thumb-purple-900 scrollbar-track-gray-400 }

js npm install -D tailwind-scrollbar

js / @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src//*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [ require('tailwind-scrollbar'), ], }

jsx import React from 'react'

interface LoadingProps {

}

export const Loading: React.FC<LoadingProps> = ({}) => { return (
<div className='h-full w-full flex-center bg-slate-300 text-lg'>
loading ...
</div>
); }

js import React, {useContext, useState} from "react"; import UserContext from './../utils/context'; import axios from 'axios';

interface JoinRoomProps {

}

export const JoinRoom: React.FC<JoinRoomProps> = () => {

const [input, setInput] = useState({ username: "", room: "general" }); const [error, setError] = useState({ name:"", message:"" });

const devUrl="http://localhost:4000"

const client = axios.create({ baseURL:devUrl}); const user = useContext(UserContext); //console.log("JoinRoom.tsx user ==== ",user.user)

const handleChange = async (e: any) => { const { value } = e.target; setInput({ ...input, [e.target.id]: value, });

};

const handleSubmit = async (e: any) => { //console.log("inputon submit ==== ",input) e.preventDefault();

if(input.username !== ""){ const roomname = input.room.toLowerCase() const username = input.username.toLowerCase() const room_data = {username,room:roomname} // localStorage.setItem("user-room",JSON.stringify(room_data)); // user.updateUser(room_data)

client.post('/users', {user:room_data}) .then( (response)=> { const user_exist =response.data.data //console.log("user exists? === ",user_exist)

if(!user_exist){

localStorage.setItem("user-room",JSON.stringify(room_data)); user.updateUser(room_data)
} else{ setError({name:"username",message:"username exists"}) } }) .catch(function (error) { //console.log("error logging in === ",error) setError({name:"username",message:"connection error"}) });

} else{ setError({name:"username",message:"nick name needed"}) }

};
const isError=()=>{ if(error.name === "") return false return true}

return (
<div className="h-full w-full flex-center-col bg-gradient-to-l from-cyan-900 to-purple-900">
<form className="w-[95%] md:w-[50%] p-3 bg-slate-700 rounded-lg text-white shadow-lg shadow-purple-500 ">
<div className="flex-center-col">
<label className="text-lg font-bold">Join</label>
<input style={{borderColor:isError()?"red":""}} className="w-[80%] md:w-[80%] p-2 m-1 border-black border rounded-sm bg-black" id="username" placeholder="nick name" onChange={handleChange} value={input.username} />

<input className="w-[80%] md:w-[80%] p-2 m-1 border-black border rounded-sm bg-black" id="room" placeholder="room name" onChange={handleChange} value={input.room} />
{isError()?<div className="text-md p-1m-1 text-red-300">{error.message}</div>:null} <button onClick={handleSubmit} className="p-2 m-1 w-[30%] bg-purple-800 shadow-md hover:shadow-purple-400 rounded-md">Join</button>
</div>
</form>

</div>
); }
```

on submit it will make a post request which will check if the username is currently in use and add the user to local torage and user context if not,

and finally for the chats component
first the toolbar component

responsible for displaying the room name user count in the room, it also has a leave room button which will set user to null causing a switch to the joinroom component.

Chats.tsx

and that's it .

in my opinion doing it with graphql subscriptions is neater and gives you more control over how the clients connect , so if anyone knows how to make it work on heroku i would love tohear from you.

during the writing of this article i've already noticed a possible bug that would cause a username collision. if a user successfully joins with username "john" then leaves and closes the browser disconnecting the from the server , if he comes back and another user joined using the username john the client will grab the local storage value which is john and join a room with another user in the room with the same username . i'll let you tackle that one please send me a pull request if you do or find any other bug .

final client code final server code [react native code] (https://github.com/tigawanna/sockets-rn)