DEV Community

Kb Bohara
Kb Bohara

Posted on

Custom socket.io server.ts in nextjs baby.

#nextjs #websocket #approuter #customserver
  1. Create a server.ts file in root dir of your nextjs project. vim server.ts 
import { createServer } from 'http' import { parse } from 'url' import next from 'next' const port = parseInt(process.env.PORT || '3000', 10) const dev = process.env.NODE_ENV !== 'production' const app = next({ dev }) const handle = app.getRequestHandler() app.prepare().then(() => { const httpServer = createServer((req, res) => { const parsedUrl = parse(req.url!, true) handle(req, res, parsedUrl) }) httpServer.listen(port) console.log( `> Server listening at http://localhost:${port} as ${dev ? 'development' : process.env.NODE_ENV }` ) })
Enter fullscreen mode Exit fullscreen mode
  1. For socket.io.

pnpm add socket.io socket.io-client
vim server.ts

#...imports import { Server } from "socket.io"; # const httpServer = ...} const io = new Server(httpServer, { // options }); # socket stuff io.on("connect", (socket) => { console.log("Socket connected", socket.id) socket.on("msg", (data) => { console.log(data) socket.emit("msg", data) }) }); # ...rest
Enter fullscreen mode Exit fullscreen mode
  1. package.json

pnpm add cross-env
pnpm add ts-node -D

"type": "module", "scripts": { "dev": "nodemon", "build": "next build && tsc --project tsconfig.server.json", "start": "cross-env NODE_ENV=production node dist/server.js" },
Enter fullscreen mode Exit fullscreen mode

4.tsconfig-server.json

{ "extends": "./tsconfig.json", "compilerOptions": { "module": "es2015", "outDir": "dist", "lib": ["es2019"], "target": "es2019", "isolatedModules": false, "noEmit": false }, "include": ["server.ts"] }
Enter fullscreen mode Exit fullscreen mode
  1. app/page.tsx (whatever) 
"use client"; import { useEffect, useRef } from "react"; import { Button } from "@/components/ui/button"; import { io, Socket } from "socket.io-client"; export default function Home() { const socketRef = useRef<Socket | null>(null); useEffect(() => { socketRef.current = io("ws://localhost:3000", { reconnectionDelayMax: 10000, }); // Cleanup the socket connection on unmount return () => { socketRef.current?.disconnect(); }; }, []); const handleSend = () => { socketRef.current?.emit("msg", { a: "b", c: [] }); socketRef.current?.on("msg", (data) => { console.log(data) }) }; return <Button onClick={handleSend}>Send</Button> }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)