├── .dockerignore
├── .gitignore
├── Dockerfile
├── README.md
├── app
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    └── page.tsx
├── docker-entrypoint.js
├── eslint.config.mjs
├── fly.toml
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
    ├── file.svg
    ├── globe.svg
    ├── next.svg
    ├── vercel.svg
    └── window.svg
├── server.ts
├── tailwind.config.ts
└── tsconfig.json


/.dockerignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | # syntax = docker/dockerfile:1
 2 | 
 3 | # Adjust NODE_VERSION as desired
 4 | ARG NODE_VERSION=23.7.0
 5 | FROM node:${NODE_VERSION}-slim AS base
 6 | 
 7 | LABEL fly_launch_runtime="Next.js"
 8 | 
 9 | # Next.js app lives here
10 | WORKDIR /app
11 | 
12 | # Set production environment
13 | ENV NODE_ENV="production"
14 | 
15 | 
16 | # Throw-away build stage to reduce size of final image
17 | FROM base AS build
18 | 
19 | # Install packages needed to build node modules
20 | RUN apt-get update -qq && \
21 |     apt-get install --no-install-recommends -y build-essential node-gyp pkg-config python-is-python3
22 | 
23 | # Install node modules
24 | COPY package-lock.json package.json ./
25 | RUN npm ci --include=dev
26 | 
27 | # Copy application code
28 | COPY . .
29 | 
30 | # Build application
31 | RUN npx next build --experimental-build-mode compile
32 | 
33 | # Remove development dependencies
34 | RUN npm prune --omit=dev
35 | 
36 | 
37 | # Final stage for app image
38 | FROM base
39 | 
40 | # Copy built application
41 | COPY --from=build /app /app
42 | 
43 | # Entrypoint sets up the container.
44 | ENTRYPOINT [ "/app/docker-entrypoint.js" ]
45 | 
46 | # Start the server by default, this can be overwritten at runtime
47 | EXPOSE 3000
48 | CMD [ "npm", "run", "start" ]
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Sample App: Using web sockets on Next.js
 2 | 
 3 | This is a very simple chat application that demonstrates how to web sockets with Next.js. See the video for a walk through of this code: https://youtu.be/9DEvkYB5_A4
 4 | 
 5 | ## Running locally
 6 | 
 7 | First install all dependencies:
 8 | 
 9 | ```bash
10 | npm install
11 | ```
12 | 
13 | Then start the development server:
14 | 
15 | ```bash
16 | npm run dev
17 | ```
18 | 
19 | ## Deploying to Fly.io
20 | 
21 | To deploy this application to Fly.io, simply run:
22 | 
23 | ```bash
24 | fly launch
25 | ```
26 | 
27 | When it asks:
28 | ```
29 | An existing fly.toml file was found for app ws-demo-next
30 | ? Would you like to copy its configuration to the new app?
31 | ```
32 | 
33 | Choose **Yes**.
34 | 
35 | When it asks:
36 | ```
37 | ? Do you want to tweak these settings before proceeding?
38 | ```
39 | 
40 | Choose **No** (unless you want to change the app name or region, etc)
41 | 
42 | Once finished, you'll be able to access your app at `https://<YOUR-APP>.fly.dev`


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fly-apps/nextjs-websockets/f0a2aa5c1abd88af075133259e6a80f854118766/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --background: #ffffff;
 7 |   --foreground: #171717;
 8 | }
 9 | 
10 | @media (prefers-color-scheme: dark) {
11 |   :root {
12 |     --background: #0a0a0a;
13 |     --foreground: #ededed;
14 |   }
15 | }
16 | 
17 | body {
18 |   color: var(--foreground);
19 |   background: var(--background);
20 |   font-family: Arial, Helvetica, sans-serif;
21 | }
22 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Geist, Geist_Mono } from "next/font/google";
 3 | import "./globals.css";
 4 | 
 5 | const geistSans = Geist({
 6 |   variable: "--font-geist-sans",
 7 |   subsets: ["latin"],
 8 | });
 9 | 
10 | const geistMono = Geist_Mono({
11 |   variable: "--font-geist-mono",
12 |   subsets: ["latin"],
13 | });
14 | 
15 | export const metadata: Metadata = {
16 |   title: "Create Next App",
17 |   description: "Generated by create next app",
18 | };
19 | 
20 | export default function RootLayout({
21 |   children,
22 | }: Readonly<{
23 |   children: React.ReactNode;
24 | }>) {
25 |   return (
26 |     <html lang="en">
27 |       <body
28 |         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
29 |       >
30 |         {children}
31 |       </body>
32 |     </html>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | import { useEffect, useRef, useState } from "react";
  3 | 
  4 | export default function Home() {
  5 |   const [messages, setMessages] = useState<string[]>([]);
  6 |   const [newMessage, setNewMessage] = useState('');
  7 |   const [connectionStatus, setConnectionStatus] = useState<'connected' | 'disconnected' | 'connecting'>('connecting');
  8 |   const wsRef = useRef<WebSocket | null>(null);
  9 | 
 10 |   useEffect(() => {
 11 |     
 12 |     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 13 |     const ws = new WebSocket(`${protocol}//${window.location.host}/api/ws`);
 14 |     wsRef.current = ws;
 15 | 
 16 | 
 17 |     ws.onopen = () => {
 18 |       setConnectionStatus('connected');
 19 |     };
 20 | 
 21 |     ws.onclose = () => {
 22 |       setConnectionStatus('disconnected');
 23 |     };
 24 | 
 25 |     ws.onmessage = (event) => {
 26 |       setMessages((prevMessages) => [...prevMessages, event.data]);
 27 |     };
 28 | 
 29 |     const pingInterval = setInterval(() => {
 30 |       if (ws.readyState === WebSocket.OPEN) {
 31 |         ws.send(`{"event":"ping"}`);
 32 |       }
 33 |     }, 29000);
 34 | 
 35 |     return () => {
 36 |       clearInterval(pingInterval);
 37 |       if (wsRef.current) {
 38 |         wsRef.current.close();
 39 |       }
 40 |     };
 41 |   }, [])  
 42 | 
 43 |   const sendMessage = (e: React.FormEvent<HTMLFormElement>) => {
 44 |     e.preventDefault();
 45 |     if (!newMessage.trim()) return;
 46 | 
 47 |     if (wsRef.current?.readyState === WebSocket.OPEN) {
 48 |       wsRef.current.send(newMessage);
 49 |       setNewMessage('');
 50 |     }
 51 |   }
 52 | 
 53 |   return (
 54 |     <main className="flex min-h-screen items-center justify-center bg-gradient-to-b from-gray-50 to-gray-100">
 55 |       <div className="w-full max-w-2xl mx-4 bg-white rounded-xl shadow-lg flex flex-col h-[80vh] border border-gray-200">
 56 |         <div className={`px-6 py-3 text-sm font-medium rounded-t-xl ${
 57 |           connectionStatus === 'connected' ? 'bg-green-50 text-green-700 border-b border-green-100' :
 58 |           connectionStatus === 'disconnected' ? 'bg-red-50 text-red-700 border-b border-red-100' :
 59 |           'bg-yellow-50 text-yellow-700 border-b border-yellow-100'
 60 |         }`}>
 61 |           <div className="flex items-center gap-2">
 62 |             <div className={`w-2 h-2 rounded-full ${
 63 |               connectionStatus === 'connected' ? 'bg-green-500' :
 64 |               connectionStatus === 'disconnected' ? 'bg-red-500' :
 65 |               'bg-yellow-500'
 66 |             }`}></div>
 67 |             Status: {connectionStatus}
 68 |           </div>
 69 |         </div>
 70 | 
 71 |         <div 
 72 |           className="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50"
 73 |         >
 74 |           {messages.map((message, index) => (
 75 |             <div 
 76 |               key={index}
 77 |               className="bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition-all hover:shadow-md"
 78 |             >
 79 |               <p className="text-gray-800 font-medium">{message}</p>
 80 |             </div>
 81 |           ))}
 82 |         </div>
 83 | 
 84 |         <form 
 85 |           onSubmit={sendMessage}
 86 |           className="border-t border-gray-100 p-6 bg-white rounded-b-xl"
 87 |         >
 88 |           <div className="flex gap-3">
 89 |             <input
 90 |               type="text"
 91 |               value={newMessage}
 92 |               onChange={(e) => setNewMessage(e.target.value)}
 93 |               className="flex-1 rounded-lg border border-gray-200 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
 94 |               placeholder="Type your message..."
 95 |             />
 96 |             <button
 97 |               type="submit"
 98 |               disabled={connectionStatus !== 'connected'}
 99 |               className={`px-6 py-3 rounded-lg font-medium transition-all ${
100 |                 connectionStatus === 'connected'
101 |                   ? 'bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700 shadow-sm hover:shadow'
102 |                   : 'bg-gray-200 text-gray-400 cursor-not-allowed'
103 |               }`}
104 |             >
105 |               Send
106 |             </button>
107 |           </div>
108 |         </form>
109 |       </div>
110 |     </main>
111 |     // <div>
112 |     //   <div className="font-bold">Status: {connectionStatus}</div>
113 |       
114 |     //   <div>
115 |     //     {messages.map((message, index) => (
116 |     //       <div key={index}>{message}</div>
117 |     //     ))}
118 |     //   </div>
119 | 
120 |     //   <form onSubmit={sendMessage}>
121 |     //     <input
122 |     //       type="text"
123 |     //       value={newMessage}
124 |     //       onChange={(e) => setNewMessage(e.target.value)}
125 |     //       placeholder="Type your message..."
126 |     //       className="border border-gray-400 rounded p-2"
127 |     //     />
128 |     //     <button type="submit" disabled={connectionStatus !== 'connected'}>
129 |     //       Send
130 |     //     </button>
131 |     //   </form>
132 |     // </div>
133 |   );
134 | }
135 | 


--------------------------------------------------------------------------------
/docker-entrypoint.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | const { spawn } = require('node:child_process')
 4 | 
 5 | const env = { ...process.env }
 6 | 
 7 | ;(async() => {
 8 |   // If running the web server then prerender pages
 9 |   if (process.argv.slice(-3).join(' ') === 'npm run start') {
10 |     await exec('npx next build --experimental-build-mode generate')
11 |   }
12 | 
13 |   // launch application
14 |   await exec(process.argv.slice(2).join(' '))
15 | })()
16 | 
17 | function exec(command) {
18 |   const child = spawn(command, { shell: true, stdio: 'inherit', env })
19 |   return new Promise((resolve, reject) => {
20 |     child.on('exit', code => {
21 |       if (code === 0) {
22 |         resolve()
23 |       } else {
24 |         reject(new Error(`${command} failed rc=${code}`))
25 |       }
26 |     })
27 |   })
28 | }
29 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 | 
16 | export default eslintConfig;
17 | 


--------------------------------------------------------------------------------
/fly.toml:
--------------------------------------------------------------------------------
 1 | # fly.toml app configuration file generated for ws-demo-next on 2025-02-19T15:21:49-08:00
 2 | #
 3 | # See https://fly.io/docs/reference/configuration/ for information about how to use this file.
 4 | #
 5 | 
 6 | app = 'ws-demo-next'
 7 | primary_region = 'sea'
 8 | 
 9 | [build]
10 | 
11 | [http_service]
12 |   internal_port = 3000
13 |   force_https = true
14 |   auto_stop_machines = 'stop'
15 |   auto_start_machines = true
16 |   min_machines_running = 0
17 |   processes = ['app']
18 | 
19 | [[vm]]
20 |   memory = '1gb'
21 |   cpu_kind = 'shared'
22 |   cpus = 1
23 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   /* config options here */
5 | };
6 | 
7 | export default nextConfig;
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ws-demo-next",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "node server.ts",
 7 |     "build": "next build",
 8 |     "start": "NODE_ENV=production node server.ts",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "next": "15.1.6",
13 |     "react": "^19.0.0",
14 |     "react-dom": "^19.0.0",
15 |     "ws": "^8.18.0"
16 |   },
17 |   "devDependencies": {
18 |     "@eslint/eslintrc": "^3",
19 |     "@flydotio/dockerfile": "^0.7.4",
20 |     "@types/node": "^20",
21 |     "@types/react": "^19",
22 |     "@types/react-dom": "^19",
23 |     "@types/ws": "^8.5.14",
24 |     "eslint": "^9",
25 |     "eslint-config-next": "15.1.6",
26 |     "postcss": "^8",
27 |     "tailwindcss": "^3.4.1",
28 |     "typescript": "^5"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/public/file.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/public/window.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>


--------------------------------------------------------------------------------
/server.ts:
--------------------------------------------------------------------------------
 1 | import { parse } from 'node:url';
 2 | import { createServer, Server, IncomingMessage, ServerResponse } from 'node:http';
 3 | import next from 'next';
 4 | import { WebSocket, WebSocketServer } from 'ws';
 5 | import { Socket } from 'node:net';
 6 | 
 7 | const nextApp = next({ dev: process.env.NODE_ENV !== "production" });
 8 | const handle = nextApp.getRequestHandler();
 9 | const clients: Set<WebSocket> = new Set();
10 | 
11 | nextApp.prepare().then(() => {
12 |   const server: Server = createServer((req: IncomingMessage, res: ServerResponse) => {
13 |     handle(req, res, parse(req.url || '', true));
14 |   });
15 | 
16 |   const wss = new WebSocketServer({ noServer: true });
17 | 
18 |   wss.on('connection', (ws: WebSocket) => {
19 |     clients.add(ws);
20 |     console.log('New client connected');
21 | 
22 |     ws.on('message', (message: Buffer, isBinary: boolean) => {
23 |       console.log(`Message received: ${message}`);
24 |       clients.forEach(client => {
25 |         if (client.readyState === WebSocket.OPEN && (message.toString() !== `{"event":"ping"}`)) {
26 |           client.send(message, { binary: isBinary });
27 |         }
28 |       });
29 |     })
30 | 
31 |     ws.on('close', () => {
32 |       clients.delete(ws);
33 |       console.log('Client disconnected');
34 |     });
35 |   })
36 | 
37 |   server.on("upgrade", (req: IncomingMessage, socket: Socket, head: Buffer) => {
38 |     const { pathname } = parse(req.url || "/", true);
39 | 
40 |     if (pathname === "/_next/webpack-hmr") {
41 |       nextApp.getUpgradeHandler()(req, socket, head);
42 |     }
43 | 
44 |     if (pathname === "/api/ws") {
45 |       wss.handleUpgrade(req, socket, head, (ws) => {
46 |         wss.emit('connection', ws, req);
47 |       });
48 |     }
49 |   })
50 | 
51 |   server.listen(3000);
52 |   console.log('Server listening on port 3000');
53 | })


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | export default {
 4 |   content: [
 5 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       colors: {
12 |         background: "var(--background)",
13 |         foreground: "var(--foreground)",
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | } satisfies Config;
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------