├── .gitignore
├── frontend
├── .env.development
├── .eslintrc.json
├── postcss.config.js
├── public
│ ├── chatroom.png
│ └── powered-by-vercel.svg
├── src
│ ├── app
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── emotion.tsx
│ │ ├── layout.tsx
│ │ ├── provide.tsx
│ │ ├── page.tsx
│ │ └── home
│ │ │ └── page.tsx
│ ├── config
│ │ └── index.ts
│ ├── store
│ │ ├── basic.ts
│ │ └── socket.ts
│ ├── types
│ │ └── next.ts
│ ├── components
│ │ ├── NameModal.tsx
│ │ ├── Avatar.tsx
│ │ ├── ChatroomInput.tsx
│ │ └── ChatroomTitle.tsx
│ └── pages
│ │ └── api
│ │ └── socket
│ │ └── socketio.ts
├── .env.production
├── next.config.js
├── .gitignore
├── tailwind.config.js
├── tsconfig.json
├── package.json
└── README.md
├── backend
├── README.md
├── .prettierignore
├── .eslintignore
├── .env.production
├── .env.development
├── .prettierrc
├── .env.example
├── src
│ ├── config.ts
│ ├── core
│ │ ├── ApiError.ts
│ │ ├── Logger.ts
│ │ └── ApiResponse.ts
│ ├── app.ts
│ └── server.ts
├── .gitignore
├── .eslintrc
├── package.json
├── tsconfig.json
└── pnpm-lock.yaml
├── LICENSE
├── README.tw.md
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | /**/node_modules
--------------------------------------------------------------------------------
/frontend/.env.development:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_SOCKET_URL=/
--------------------------------------------------------------------------------
/backend/README.md:
--------------------------------------------------------------------------------
1 | # Socket.io Node.js Backend Typescript Project
--------------------------------------------------------------------------------
/frontend/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/backend/.prettierignore:
--------------------------------------------------------------------------------
1 | build/
2 | coverage/
3 | keys/
4 | logs/
5 | node_modules/
6 | *.md
--------------------------------------------------------------------------------
/backend/.eslintignore:
--------------------------------------------------------------------------------
1 | .vscode/
2 |
3 | node_modules/
4 |
5 | # Build products
6 | build/
7 | dist/
8 | tools/
--------------------------------------------------------------------------------
/frontend/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/frontend/public/chatroom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ttpss930141011/nextjs-13-socketio-template/HEAD/frontend/public/chatroom.png
--------------------------------------------------------------------------------
/frontend/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ttpss930141011/nextjs-13-socketio-template/HEAD/frontend/src/app/favicon.ico
--------------------------------------------------------------------------------
/frontend/src/config/index.ts:
--------------------------------------------------------------------------------
1 | export const SOCKET_URL = process.env.NEXT_PUBLIC_SOCKET_URL;
2 | export const environment = process.env.NODE_ENV;
--------------------------------------------------------------------------------
/backend/.env.production:
--------------------------------------------------------------------------------
1 | # Environment Name
2 | NODE_ENV=production
3 |
4 | # Server listen to this port
5 | PORT=3001
6 |
7 | #Cors
8 | CORS_URL=*
--------------------------------------------------------------------------------
/backend/.env.development:
--------------------------------------------------------------------------------
1 | # Environment Name
2 | NODE_ENV=development
3 |
4 | # Server listen to this port
5 | PORT=3001
6 |
7 | #Cors
8 | CORS_URL=*
--------------------------------------------------------------------------------
/frontend/src/app/globals.css:
--------------------------------------------------------------------------------
1 | /* @tailwind base; */
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | textarea::-webkit-scrollbar {
6 | width: 0;
7 | }
8 |
--------------------------------------------------------------------------------
/backend/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "useTabs": false,
3 | "semi": true,
4 | "trailingComma": "all",
5 | "singleQuote": true,
6 | "printWidth": 80,
7 | "tabWidth": 2
8 | }
9 |
--------------------------------------------------------------------------------
/backend/.env.example:
--------------------------------------------------------------------------------
1 | # .env.example
2 |
3 | # Environment Name
4 | NODE_ENV=development
5 |
6 | # Server listen to this port
7 | PORT=3000
8 |
9 | #Cors
10 | CORS_URL=*
11 |
--------------------------------------------------------------------------------
/frontend/.env.production:
--------------------------------------------------------------------------------
1 | # if you wanna deploy to Vercel, you need to host bankend and replace the url or create a new .env.production.local file
2 | NEXT_PUBLIC_SOCKET_URL=ws://localhost:3001
--------------------------------------------------------------------------------
/backend/src/config.ts:
--------------------------------------------------------------------------------
1 | // Mapper for environment variables
2 | export const environment = process.env.NODE_ENV;
3 | export const port = process.env.PORT;
4 | export const corsUrl = process.env.CORS_URL;
5 | export const logDirectory = process.env.LOG_DIR;
--------------------------------------------------------------------------------
/frontend/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | webpack: (config) => {
4 |
5 | config.externals.push({
6 | 'utf-8-validate': 'commonjs utf-8-validate',
7 | bufferutil: 'commonjs bufferutil',
8 | })
9 |
10 | return config
11 | },
12 | }
13 |
14 | module.exports = nextConfig
--------------------------------------------------------------------------------
/frontend/.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.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/frontend/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
5 | './src/components/**/*.{js,ts,jsx,tsx,mdx}',
6 | './src/app/**/*.{js,ts,jsx,tsx,mdx}',
7 | ],
8 | theme: {
9 | extend: {
10 | backgroundImage: {
11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 | 'gradient-conic':
13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 | },
15 | },
16 | },
17 | plugins: [],
18 | }
19 |
--------------------------------------------------------------------------------
/backend/.gitignore:
--------------------------------------------------------------------------------
1 | # Add any directories, files, or patterns you don't want to be tracked by version control
2 | .idea
3 |
4 | # ignore vs code project config files
5 | .vs
6 |
7 | # ignore logs
8 | logs
9 | *.log
10 |
11 | # ignore 3rd party lib
12 | node_modules
13 |
14 | # ignore key
15 | *.pem
16 |
17 | # Ignore built files
18 | build
19 |
20 | # ignore test converage
21 | coverage
22 |
23 | # Environment varibles
24 | *.env
25 | *.env.test
26 | *.env copy
27 |
28 | #keys
29 | keys/*
30 | !keys/*.md
31 | !keys/*.example
32 |
33 | #temp
34 | temp
35 | .DS_Store
36 |
37 | *.save
38 | *.save.*
--------------------------------------------------------------------------------
/frontend/src/app/emotion.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { CacheProvider } from "@emotion/react";
4 | import { useEmotionCache } from "@mantine/core";
5 | import { useServerInsertedHTML } from "next/navigation";
6 |
7 | export default function RootStyleRegistry({ children }: { children: React.ReactNode }) {
8 | const cache = useEmotionCache();
9 | cache.compat = true;
10 |
11 | useServerInsertedHTML(() => (
12 |
18 | ));
19 |
20 | return {children};
21 | }
22 |
--------------------------------------------------------------------------------
/backend/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "@typescript-eslint/naming-convention": "off",
4 | "@typescript-eslint/ban-ts-comment": "off",
5 | "@typescript-eslint/no-explicit-any": "off",
6 | "@typescript-eslint/explicit-function-return-types": "off",
7 | "@typescript-eslint/explicit-module-boundary-types": "off"
8 | },
9 | "extends": [
10 | "plugin:@typescript-eslint/recommended" // Uses the recommended rules from the @typescript-eslint/eslint-plugin
11 | ],
12 | "parser": "@typescript-eslint/parser",
13 | "parserOptions": {
14 | "ecmaVersion": "latest", // Allows for the parsing of modern ECMAScript features
15 | "sourceType": "module" // Allows for the use of imports
16 | },
17 |
18 | "env": {
19 | "node": true
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/frontend/src/store/basic.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { persist, createJSONStorage } from "zustand/middleware";
3 | import { v4 as uuidv4 } from "uuid";
4 |
5 | type Store = {
6 | name: string;
7 | setName: (name: string) => void;
8 | };
9 |
10 | const useBasicStore = create()(
11 | persist(
12 | (set) => ({
13 | name: uuidv4(),
14 | setName: (name) => {
15 | set({ name });
16 | },
17 | }),
18 | {
19 | name: "basic", // name of the item in the storage (must be unique)
20 | storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
21 | }
22 | )
23 | );
24 |
25 | export default useBasicStore;
26 |
--------------------------------------------------------------------------------
/frontend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./src/*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------
/frontend/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "./globals.css";
2 | import { Inter } from "next/font/google";
3 | import { AppProvider } from "./provide";
4 | import { Toaster } from "react-hot-toast";
5 |
6 | const inter = Inter({ subsets: ["latin"] });
7 |
8 | type Prop = {
9 | children: React.ReactNode;
10 | };
11 |
12 | export const metadata = {
13 | title: "A Simple Full-Stack Socket.io Demo",
14 | description: "This repo implements a simple chat app with Socket.io, Next.js 13, Mantine and Zustand.",
15 | };
16 |
17 | export default function RootLayout({ children }: Prop) {
18 | return (
19 |
20 |
21 | {children}
22 |
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/frontend/src/app/provide.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { MantineProvider } from "@mantine/core";
3 | import RootStyleRegistry from "./emotion";
4 | import { useEffect } from "react";
5 | import useSocketStore from "@/store/socket";
6 |
7 | type Prop = {
8 | children: React.ReactNode;
9 | };
10 | export function AppProvider({ children }: Prop) {
11 | const disconnect = useSocketStore((state) => state.disconnect);
12 |
13 | useEffect(() => {
14 | window.addEventListener("beforeunload", disconnect);
15 | return () => {
16 | window.removeEventListener("beforeunload", disconnect);
17 | disconnect();
18 | };
19 | }, [disconnect]);
20 |
21 | return (
22 |
23 |
24 | {children}
25 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Justin Xiao
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nextjs13-socketio-demo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "prod": "next build && next start",
8 | "build": "next build",
9 | "start": "next start",
10 | "lint": "next lint"
11 | },
12 | "dependencies": {
13 | "@emotion/react": "^11.11.1",
14 | "@mantine/core": "^6.0.15",
15 | "@mantine/form": "^6.0.15",
16 | "@mantine/hooks": "^6.0.15",
17 | "@mantine/modals": "^6.0.15",
18 | "@mantine/nprogress": "^6.0.15",
19 | "@tabler/icons-react": "^2.23.0",
20 | "@types/node": "20.3.3",
21 | "@types/react": "18.2.14",
22 | "@types/react-dom": "18.2.6",
23 | "autoprefixer": "10.4.14",
24 | "eslint": "8.44.0",
25 | "eslint-config-next": "13.4.7",
26 | "next": "13.4.7",
27 | "postcss": "8.4.24",
28 | "react": "18.2.0",
29 | "react-dom": "18.2.0",
30 | "react-hot-toast": "^2.4.1",
31 | "socket.io": "^4.7.1",
32 | "socket.io-client": "^4.7.1",
33 | "tailwindcss": "3.3.2",
34 | "typescript": "5.1.6",
35 | "uuid": "^9.0.0",
36 | "zustand": "^4.3.8"
37 | },
38 | "devDependencies": {
39 | "@types/uuid": "^9.0.2"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/backend/src/core/ApiError.ts:
--------------------------------------------------------------------------------
1 | import { Response } from 'express';
2 | import { environment } from '../config';
3 | import { InternalErrorResponse } from './ApiResponse';
4 |
5 | export enum ErrorType {
6 | INTERNAL = 'InternalError',
7 | NOT_FOUND = 'NotFoundError',
8 | }
9 |
10 | export abstract class ApiError extends Error {
11 | constructor(public type: ErrorType, public message: string = 'error') {
12 | super(type);
13 | }
14 |
15 | public static handle(err: ApiError, res: Response): Response {
16 | switch (err.type) {
17 | case ErrorType.INTERNAL:
18 | return new InternalErrorResponse(err.message).send(res);
19 | case ErrorType.NOT_FOUND:
20 | default: {
21 | let message = err.message;
22 | // Do not send failure message in production as it may send sensitive data
23 | if (environment === 'production') message = 'Something wrong happened.';
24 | return new InternalErrorResponse(message).send(res);
25 | }
26 | }
27 | }
28 | }
29 |
30 | export class InternalError extends ApiError {
31 | constructor(message = 'Internal error') {
32 | super(ErrorType.INTERNAL, message);
33 | }
34 | }
35 |
36 | export class NotFoundError extends ApiError {
37 | constructor(message = 'Not Found') {
38 | super(ErrorType.NOT_FOUND, message);
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/backend/src/app.ts:
--------------------------------------------------------------------------------
1 | import express, { Request, Response, NextFunction } from 'express';
2 | import Logger from './core/Logger';
3 | import cors from 'cors';
4 | import { corsUrl, environment } from './config';
5 | import {
6 | NotFoundError,
7 | ApiError,
8 | InternalError,
9 | ErrorType,
10 | } from './core/ApiError';
11 |
12 | process.on('uncaughtException', (e) => Logger.error(e));
13 |
14 | const app = express();
15 |
16 | app.use(cors({ origin: corsUrl, optionsSuccessStatus: 200 }));
17 |
18 | // catch 404 and forward to error handler
19 | app.use((req, res, next) => next(new NotFoundError()));
20 |
21 | // Middleware Error Handler
22 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
23 | app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
24 | if (err instanceof ApiError) {
25 | ApiError.handle(err, res);
26 | if (err.type === ErrorType.INTERNAL)
27 | Logger.error(
28 | `500 - ${err.message} - ${req.originalUrl} - ${req.method} - ${req.ip}`,
29 | );
30 | } else {
31 | Logger.error(
32 | `500 - ${err.message} - ${req.originalUrl} - ${req.method} - ${req.ip}`,
33 | );
34 | Logger.error(err);
35 | if (environment === 'development') return res.status(500).send(err);
36 | ApiError.handle(new InternalError(), res);
37 | }
38 | });
39 |
40 | export default app;
41 |
--------------------------------------------------------------------------------
/backend/src/core/Logger.ts:
--------------------------------------------------------------------------------
1 | import { createLogger, transports, format } from 'winston';
2 | import fs from 'fs';
3 | import path from 'path';
4 | import DailyRotateFile from 'winston-daily-rotate-file';
5 | import { environment, logDirectory } from '../config';
6 |
7 | let dir = logDirectory;
8 | if (!dir) dir = path.resolve('logs');
9 |
10 | // create directory if it is not present
11 | if (!fs.existsSync(dir)) fs.mkdirSync(dir); // Create the directory if it does not exist
12 |
13 | const logLevel = environment === 'development' ? 'debug' : 'warn';
14 |
15 | const dailyRotateFile = new DailyRotateFile({
16 | level: logLevel,
17 | // @ts-ignore
18 | filename: dir + '/%DATE%.log',
19 | datePattern: 'YYYY-MM-DD',
20 | zippedArchive: true,
21 | handleExceptions: true,
22 | maxSize: '20m',
23 | maxFiles: '14d',
24 | format: format.combine(
25 | format.errors({ stack: true }),
26 | format.timestamp(),
27 | format.json(),
28 | ),
29 | });
30 |
31 | export default createLogger({
32 | transports: [
33 | new transports.Console({
34 | level: logLevel,
35 | format: format.combine(
36 | format.errors({ stack: true }),
37 | format.prettyPrint(),
38 | ),
39 | }),
40 | dailyRotateFile,
41 | ],
42 | exceptionHandlers: [dailyRotateFile],
43 | exitOnError: false, // do not exit on handled exceptions
44 | });
45 |
--------------------------------------------------------------------------------
/frontend/src/types/next.ts:
--------------------------------------------------------------------------------
1 | import { Server as NetServer, Socket } from "net";
2 | import { NextApiResponse } from "next";
3 | import { Server as SocketIOServer } from "socket.io";
4 |
5 | export type NextApiResponseServerIO = NextApiResponse & {
6 | socket: Socket & {
7 | server: NetServer & {
8 | io: SocketIOServer;
9 | };
10 | };
11 | };
12 |
13 | export type SocketPrivateMessage = {
14 | from: string;
15 | to: string;
16 | message: string;
17 | timestamp: number;
18 | };
19 |
20 | export type SocketBroadcastMessage = {
21 | from: string;
22 | message: string;
23 | timestamp: number;
24 | };
25 |
26 | export type SocketOnlineUser = {
27 | socketId: string;
28 | name: string | null;
29 | };
30 |
31 | /**
32 | * Originally, I used SocketPrivateMessage type, and only distinguish whether the message is from me or not by checking the socket id in "from" property.
33 | * Then I can put the message on the right side of the ScrollArea if it is from me, and on the left side if it is not.
34 | * But I found when socket reconnects, the message on the right side will be moved to the left side because the "from" property is different.
35 | * So I decided to add "me" property to distinguish whether the message is from me or not, and use it to put the message on the right side or left side.
36 | */
37 | export type MessageWithMe = {
38 | from: string;
39 | me: boolean;
40 | message: string;
41 | timestamp: number;
42 | };
43 |
--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | ```
14 |
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 |
17 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
18 |
19 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/backend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "express-socketio-demo",
3 | "version": "1.0.0",
4 | "description": "Socket.io Backend Typescript Project",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "npm run build && SET NODE_ENV=development&& node build/server.js",
8 | "prod": "NODE_ENV=production npm run build && node build/server.js",
9 | "build": "npm run clean && npm run build-ts",
10 | "watch": "concurrently -k -p \"[{name}]\" -n \"TypeScript,Node\" -c \"yellow.bold,cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run watch-node\"",
11 | "watch-node": "nodemon -r dotenv/config build/server.js",
12 | "clean": "rimraf ./build",
13 | "build-ts": "tsc",
14 | "watch-ts": "tsc -w",
15 | "eslint": "eslint . --ext .js,.ts"
16 | },
17 | "keywords": [],
18 | "author": "Justin Xiao",
19 | "license": "MIT",
20 | "dependencies": {
21 | "axios": "^1.2.1",
22 | "cors": "^2.8.5",
23 | "dotenv": "^16.0.3",
24 | "express": "^4.18.2",
25 | "socket.io": "^4.7.1",
26 | "winston": "^3.8.2",
27 | "winston-daily-rotate-file": "^4.7.1"
28 | },
29 | "devDependencies": {
30 | "@types/cors": "^2.8.13",
31 | "@types/express": "^4.17.15",
32 | "@types/node": "^18.11.17",
33 | "@types/request": "^2.48.8",
34 | "@typescript-eslint/eslint-plugin": "^5.46.0",
35 | "@typescript-eslint/parser": "^5.46.0",
36 | "dotenv": "^16.0.3",
37 | "eslint": "^8.29.0",
38 | "nodemon": "^2.0.20",
39 | "prettier": "^2.8.1",
40 | "ts-node": "^10.9.1",
41 | "typescript": "^4.9.4"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/backend/src/core/ApiResponse.ts:
--------------------------------------------------------------------------------
1 | import { Response } from 'express';
2 |
3 | // Helper code for the API consumer to understand the error and handle is accordingly
4 | enum StatusCode {
5 | SUCCESS = '10000',
6 | FAILURE = '10001',
7 | RETRY = '10002',
8 | INVALID_ACCESS_TOKEN = '10003',
9 | }
10 |
11 | enum ResponseStatus {
12 | SUCCESS = 200,
13 | INTERNAL_ERROR = 500,
14 | }
15 |
16 | abstract class ApiResponse {
17 | constructor(
18 | protected statusCode: StatusCode,
19 | protected status: ResponseStatus,
20 | protected message: string,
21 | ) {}
22 |
23 | protected prepare(
24 | res: Response,
25 | response: T,
26 | headers: { [key: string]: string },
27 | ): Response {
28 | for (const [key, value] of Object.entries(headers)) res.append(key, value);
29 | return res.status(this.status).json(ApiResponse.sanitize(response));
30 | }
31 |
32 | public send(
33 | res: Response,
34 | headers: { [key: string]: string } = {},
35 | ): Response {
36 | return this.prepare(res, this, headers);
37 | }
38 |
39 | private static sanitize(response: T): T {
40 | const clone: T = {} as T;
41 | Object.assign(clone, response);
42 | // @ts-ignore
43 | delete clone.status;
44 | for (const i in clone) if (typeof clone[i] === 'undefined') delete clone[i];
45 | return clone;
46 | }
47 | }
48 |
49 | export class InternalErrorResponse extends ApiResponse {
50 | constructor(message = 'Internal Error') {
51 | super(StatusCode.FAILURE, ResponseStatus.INTERNAL_ERROR, message);
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/frontend/src/components/NameModal.tsx:
--------------------------------------------------------------------------------
1 | import { TextInput, Button, Modal, Text } from "@mantine/core";
2 | import { FC } from "react";
3 | import { useForm } from "@mantine/form";
4 | import useBasicStore from "@/store/basic";
5 | import useSocketStore from "@/store/socket";
6 | import { useEffect } from "react";
7 | import { SocketOnlineUser } from "@/types/next";
8 | type NameModalProps = {
9 | opened: boolean;
10 | onClose: () => void;
11 | };
12 |
13 | const NameModal: FC = ({ opened, onClose }) => {
14 | const [name, setName] = useBasicStore((state) => [state.name, state.setName]);
15 | const { socket, emit } = useSocketStore((state) => state);
16 |
17 | const form = useForm({
18 | initialValues: { name },
19 | validate: {
20 | name: (value) => (value.trim().length < 1 ? "Name is required" : null),
21 | },
22 | });
23 |
24 | useEffect(() => {
25 | if (!socket) return;
26 | emit("join", { socketId: socket.id, name: name });
27 | // eslint-disable-next-line react-hooks/exhaustive-deps
28 | }, [socket?.id, name]);
29 |
30 | // Function to handle form submission
31 | const handleSubmit = ({ name }: { name: string }) => {
32 | setName(name);
33 | onClose();
34 | };
35 |
36 | return (
37 |
38 |
52 |
53 | );
54 | };
55 |
56 | export default NameModal;
57 |
--------------------------------------------------------------------------------
/backend/src/server.ts:
--------------------------------------------------------------------------------
1 | import { config } from 'dotenv';
2 | config({ path: `.env.${process.env.NODE_ENV}` });
3 | import Logger from './core/Logger';
4 | import { corsUrl, port } from './config';
5 | import app from './app';
6 | import http from 'http';
7 | import { Server } from 'socket.io';
8 |
9 | const server = http.createServer(app);
10 | const io = new Server(server, {
11 | cors: {
12 | origin: corsUrl,
13 | },
14 | });
15 |
16 | const onlineUsers = new Map();
17 | let isEmitting = false;
18 | let sendOnlineUsers: NodeJS.Timeout;
19 |
20 | io.on('connection', (socket) => {
21 | console.log(
22 | 'PRODUCTION SERVER: user connected, online user count:',
23 | onlineUsers.size,
24 | );
25 |
26 | socket.on('join', (data) => {
27 | const { socketId, name = socketId } = data;
28 | onlineUsers.set(socketId, name);
29 | // console.log(
30 | // 'PRODUCTION SERVER: user joined, online user count:',
31 | // 'socketId: ',
32 | // socketId,
33 | // 'name: ',
34 | // name,
35 | // );
36 | });
37 |
38 | socket.on('broadcast', (broadcast, callback) => {
39 | console.log('PRODUCTION SERVER: Broadcast ', broadcast);
40 | io.emit('broadcast', broadcast);
41 | if (callback) {
42 | callback({
43 | ok: true,
44 | });
45 | }
46 | });
47 |
48 | socket.on('private_message', (message, callback) => {
49 | console.log('PRODUCTION SERVER: ', message);
50 | const { from: sourceSocketId, to: targetSocketId } = message;
51 | io.to(targetSocketId).emit('private_message', message);
52 | io.to(sourceSocketId).emit('private_message', message);
53 | if (callback) {
54 | callback({
55 | ok: true,
56 | });
57 | }
58 | });
59 |
60 | socket.on('disconnect', () => {
61 | onlineUsers.delete(socket.id);
62 | console.log(
63 | 'PRODUCTION SERVER: user disconnected, online user count:',
64 | onlineUsers.size,
65 | );
66 | if (isEmitting && onlineUsers.size === 0) {
67 | clearInterval(sendOnlineUsers);
68 | isEmitting = false;
69 | }
70 | });
71 |
72 | if (!isEmitting) {
73 | sendOnlineUsers = setInterval(
74 | () => io.emit('online_user', Object.fromEntries(onlineUsers)),
75 | 5000,
76 | );
77 | isEmitting = true;
78 | }
79 | });
80 |
81 | server
82 | .listen(port, () => {
83 | console.log(`server running on port : ${port}`);
84 | Logger.info(`server running on port : ${port}`);
85 | })
86 | .on('error', (e) => {
87 | console.log(e);
88 | Logger.error(e);
89 | });
90 |
--------------------------------------------------------------------------------
/frontend/src/components/Avatar.tsx:
--------------------------------------------------------------------------------
1 | import { createStyles, Indicator, Overlay, Avatar as MantineAvatar } from "@mantine/core";
2 | import { IconPencil } from "@tabler/icons-react";
3 | import React, { useEffect, useState } from "react";
4 | import NameModal from "./NameModal";
5 | import useBasicStore from "@/store/basic";
6 | import { useDisclosure } from "@mantine/hooks";
7 | import useSocketStore from "@/store/socket";
8 |
9 | const useStyles = createStyles((theme, { isShown }: { isShown: boolean }) => ({
10 | overlay: {
11 | cursor: "pointer",
12 | opacity: !isShown ? "0" : "1",
13 | transition: "all .2s",
14 | visibility: !isShown ? "hidden" : "visible",
15 | },
16 | }));
17 |
18 | const Avatar = () => {
19 | const socket = useSocketStore((state) => state.socket); // deconstructing socket and its method from socket store
20 | const storeName = useBasicStore((state) => state.name); // get name from basic store
21 | const [name, setName] = useState(null); // avoiding Next.js hydration error
22 | const [modalOpened, { open: modalOpen, close: modalClose }] = useDisclosure(false); // control change name modal open/close
23 | const [isShown, setIsShown] = useState(false);
24 | const { classes } = useStyles({ isShown });
25 |
26 | useEffect(() => {
27 | setName(storeName);
28 | if (!storeName) modalOpen();
29 | // eslint-disable-next-line react-hooks/exhaustive-deps
30 | }, [storeName]);
31 |
32 | return (
33 | <>
34 |
43 | setIsShown(true)}
49 | onMouseLeave={() => setIsShown(false)}
50 | >
51 | {name && name.length > 5 ? `${name.slice(0, 1)}` : name}
52 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | );
67 | };
68 |
69 | export default Avatar;
70 |
--------------------------------------------------------------------------------
/frontend/src/components/ChatroomInput.tsx:
--------------------------------------------------------------------------------
1 | import useSocketStore from "@/store/socket";
2 | import { ActionIcon, Group, Textarea, createStyles } from "@mantine/core";
3 | import { IconSend } from "@tabler/icons-react";
4 | import { KeyboardEvent, FC, useRef, useState } from "react";
5 | import toast from "react-hot-toast";
6 |
7 | type Props = {
8 | targetSocketId: string;
9 | };
10 | const useStyles = createStyles((theme) => ({
11 | Textarea: {
12 | border: "none",
13 | },
14 | }));
15 | const ChatroomInput: FC = ({ targetSocketId }) => {
16 | const { socket, emitMode, emit } = useSocketStore(); // deconstructing socket and its method from socket store
17 | const [message, setMessage] = useState(""); // message input value
18 | const messageInputRef = useRef(null); // binding message input ref to focus
19 | const { classes } = useStyles();
20 |
21 | const sendMessage = () => {
22 | if (!message) return toast.error("Please enter a message");
23 | if (!socket?.connected) return toast.error("Please reconnect server first");
24 | if (!targetSocketId && emitMode === "private_message")
25 | return toast.error("Please enter a target socket id");
26 |
27 | switch (emitMode) {
28 | case "private_message": {
29 | const messageObj = {
30 | from: socket?.id,
31 | to: targetSocketId,
32 | timestamp: Date.now(),
33 | message,
34 | };
35 | emit("private_message", messageObj);
36 | break;
37 | }
38 | case "broadcast": {
39 | const broadcastObj = {
40 | from: socket?.id,
41 | timestamp: Date.now(),
42 | message,
43 | };
44 | emit("broadcast", broadcastObj);
45 | break;
46 | }
47 | default:
48 | break;
49 | }
50 | setMessage("");
51 | messageInputRef.current?.focus();
52 | };
53 | const handleKeyDown = (e: KeyboardEvent) => {
54 | if (e.key === "Enter" && e.altKey !== true && e.shiftKey !== true && e.ctrlKey !== true) {
55 | e.preventDefault();
56 | sendMessage();
57 | }
58 | };
59 |
60 | return (
61 |
62 |