48 | 49 | 50 | 51 | ) 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import styled from 'styled-components' 3 | import io from 'socket.io-client' 4 | import dayjs from 'dayjs' 5 | import { Container, Button, InputBase, Box, Avatar, Paper, Typography } from '@material-ui/core' 6 | import { Send } from '@material-ui/icons' 7 | 8 | type ContainerProps = {} 9 | 10 | type ChatType = { 11 | userName: string 12 | message: string 13 | datetime: string 14 | } 15 | 16 | const Home = (props: ContainerProps) => { 17 | const [socket, _] = useState(() => io()) 18 | const [isConnected, setIsConnected] = useState(false) 19 | const [newChat, setNewChat] = useState({ 20 | userName: '', 21 | message: '', 22 | datetime: '', 23 | }) 24 | const [chats, setChats] = useState([ 25 | { 26 | userName: 'TEST BOT', 27 | message: 'Hello World', 28 | datetime: '2020-09-01 12:00:00', 29 | } 30 | ]) 31 | const [userName, setUserName] = useState('') 32 | const [message, setMessage] = useState('') 33 | 34 | useEffect(() => { 35 | socket.on('connect', () => { 36 | console.log('socket connected!!') 37 | setIsConnected(true) 38 | }) 39 | socket.on('disconnect', () => { 40 | console.log('socket disconnected!!') 41 | setIsConnected(false) 42 | }) 43 | socket.on('update-data', (newData: ChatType) => { 44 | console.log('Get Updated Data', newData) 45 | setNewChat(newData) 46 | }) 47 | 48 | return () => { 49 | socket.close() 50 | } 51 | }, []) 52 | 53 | useEffect(() => { 54 | if (newChat.message) { 55 | setChats([ ...chats, newChat]) 56 | } 57 | }, [newChat]) 58 | 59 | const handleSubmit = async () => { 60 | const datetime = dayjs().format('YYYY-MM-DD HH:mm:ss') 61 | await fetch(location.href + 'chat', { 62 | method: 'POST', 63 | mode: 'cors', 64 | headers: { 65 | 'Content-Type': 'application/json' 66 | }, 67 | body: JSON.stringify({ 68 | userName, 69 | message, 70 | datetime, 71 | }) 72 | }) 73 | setMessage('') 74 | } 75 | 76 | return ( 77 | 87 | ) 88 | } 89 | 90 | type Props = ContainerProps & { 91 | className?: string 92 | isConnected: boolean 93 | chats: ChatType[] 94 | userName: string 95 | message: string 96 | setUserName: (value: string) => void 97 | setMessage: (value: string) => void 98 | handleSubmit: () => void 99 | } 100 | 101 | const Component = (props: Props) => ( 102 | 103 | 104 | 105 | {props.chats.map((chat, index) => ( 106 | 107 | 108 | 109 | {chat.userName.slice(0, 1).toUpperCase() || 'T'} 110 | 111 | 112 | 113 | {chat.userName || 'TEST BOT'} 114 | {dayjs(chat.datetime).format('HH:mm')} 115 | 116 | {chat.message} 117 | 118 | 119 | 120 | ))} 121 | 122 | 123 | 124 | 125 | props.setUserName(e.target.value)} 129 | fullWidth 130 | /> 131 | props.setMessage(e.target.value)} 136 | fullWidth 137 | multiline 138 | rows={3} 139 | /> 140 | 141 | 142 | 152 | 153 | 154 | 155 | 156 | ) 157 | 158 | const StyledComponent = styled(Component)` 159 | .name { 160 | font-weight: 700; 161 | padding-right: 5px; 162 | } 163 | ` 164 | 165 | export default Home 166 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/serip39/nextjs-socketio-example/e9703d6c79e124f3aeb8757db081314e34b91d22/public/favicon.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /server/index.ts: -------------------------------------------------------------------------------- 1 | import express, { Request, Response } from 'express' 2 | import bodyParser from 'body-parser' 3 | import next from 'next' 4 | import socketio from "socket.io" 5 | 6 | const dev = process.env.NODE_ENV !== 'production' 7 | const app = next({ dev }) 8 | const handle = app.getRequestHandler() 9 | const port = process.env.PORT || 3000 10 | 11 | app 12 | .prepare() 13 | .then(() => { 14 | const server = express() 15 | 16 | server.use(bodyParser()) 17 | 18 | server.post('/chat', (req: Request, res: Response) => { 19 | console.log('body', req.body) 20 | postIO(req.body) 21 | res.status(200).json({ message: 'success' }) 22 | }) 23 | 24 | server.all('*', async (req: Request, res: Response) => { 25 | return handle(req, res) 26 | }) 27 | 28 | const httpServer = server.listen(port, (err?: any) => { 29 | if (err) throw err 30 | console.log(`> Ready on localhost:${port} - env ${process.env.NODE_ENV}`) 31 | }) 32 | 33 | const io = socketio.listen(httpServer) 34 | 35 | io.on('connection', (socket: socketio.Socket) => { 36 | console.log('id: ' + socket.id + ' is connected') 37 | }) 38 | 39 | const postIO = (data) => { 40 | io.emit('update-data', data) 41 | } 42 | }) 43 | .catch((ex) => { 44 | console.error(ex.stack) 45 | process.exit(1) 46 | }) -------------------------------------------------------------------------------- /styles/reset.scss: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 2 | margin: 0; 3 | padding: 0; 4 | border: 0; 5 | font-size: 100%; 6 | font: inherit; 7 | vertical-align: baseline; 8 | } 9 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 10 | display: block; 11 | } 12 | body { 13 | line-height: 1; 14 | } 15 | ol, ul { 16 | list-style: none; 17 | } 18 | blockquote, q { 19 | quotes: none; 20 | } 21 | blockquote { 22 | &::before, &::after { 23 | content: ""; 24 | content: none; 25 | } 26 | } 27 | q { 28 | &::before, &::after { 29 | content: ""; 30 | content: none; 31 | } 32 | } 33 | table { 34 | border-collapse: collapse; 35 | border-spacing: 0; 36 | } 37 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": false, 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 | "baseUrl": "./" 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"], 19 | "exclude": ["node_modules", ".next", "out", "dist"] 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.server.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "outDir": "dist", 6 | "target": "es2017", 7 | "isolatedModules": false, 8 | "noEmit": false 9 | }, 10 | "include": ["server/**/*.ts"] 11 | } 12 | --------------------------------------------------------------------------------