index.html : \ud074\ub77c\uc774\uc5b8\ud2b8 \ubd80\ubd84 Client part
index.js : \uc11c\ubc84\ubd80\ubd84 Server part<\/p>\n\n\n\n
– \uae30\ubcf8 \ucc44\ud305 \ud504\ub85c\uadf8\ub7a8\uc785\ub2c8\ub2e4.
– \uc774\uc804 \ud3ec\uc2a4\ud2b8 \ubd80\ubd84\uc744(\uc2e4\uc2dc\uac04 \ud1b5\uc2e0) \uc798 \uc774\ud574\ud55c\ub2e4\uba74 \uc774\ubc88 \ubd80\ubd84\ub3c4 \ud06c\uac8c \uc5b4\ub835\uc9c0 \uc54a\uc744 \uac81\ub2c8\ub2e4.
– \ub179\uc0c9 \uceec\ub7ec\ub85c \uac15\uc870\ub41c \ubd80\ubd84\uc740 \uc18c\ucf13 \ud1b5\uc2e0 \ubaa8\ub4c8\uacfc \uad00\ub828 \uc788\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4.
– \ud14d\uc2a4\ud2b8\ud544\ub4dc\uc5d0 \uc785\ub825\ub41c \uba54\uc138\uc9c0\ub97c \uc18c\ucf13 \ud1b5\uc2e0\uc73c\ub85c \uc11c\ubc84\uc5d0 \ubcf4\ub0b4\uba74 \uc11c\ubc84\uac00 \ub2e4\uc2dc \ubaa8\ub4e0 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uac8c \uba54\uc138\uc9c0\ub97c \ubcf4\ub0c5\ub2c8\ub2e4.
– input.focus() : \ud14d\uc2a4\ud2b8\ud544\ub4dc\uc5d0 \ud56d\uc0c1 \ud3ec\ucee4\uc2a4\ub97c \uc720\uc9c0\ud569\ub2c8\ub2e4.
– form.addEventListener(‘submit’, (e) => { } : Send\ubc84\ud2bc\uc744 \ub20c\ub800\uc744\ub54c submit(\ub370\uc774\ud130\uc804\uc1a1)\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
– This is a basic chat program
– If you understand the previous post part (real-time communication) well, this part won’t be too difficult.
– The parts highlighted in green are related to the socket communication module.
– When you send the message entered in the text field to the server through socket communication, the server sends the message back to all clients.
– input.focus(): Always maintains focus on the text field.
– form.addEventListener(‘submit’, (e) => { }: Executes submit (data transfer) when the Send button is pressed.<\/p>\n\n\n\n
\/\/ index.js\nconst express = require('express');\nconst { createServer } = require('node:http');\nconst { join } = require('node:path');\nconst { Server } = require('socket.io');<\/mark>\n\nasync function main() {\n\n const app = express();\n const server = createServer(app);\n\n const io = new Server(server, {\n connectionStateRecovery: {},\n });\n\n app.get('\/', (req, res) => {\n res.sendFile(join(__dirname, 'index.html'));\n });\n\n io.on('connection', async(socket) => {\n console.log('a user connected');\n\n socket.on('disconnect', () => {\n console.log('user disconnected');\n });\n \n socket.on('chat message', (msg) => {\n console.log('message: ' + msg);\n }); \n\n socket.on('chat message', async (msg) => {\n io.emit('chat message', msg);\n });\n\n });<\/mark>\n\n const port = process.env.PORT || 3000;\n\n server.listen(port, () => {\n console.log(`server running at http:\/\/localhost:${port}`);\n });\n \n}\/\/end mail()\n\nmain();<\/code><\/pre>\n\n\n\n\/\/ index.html\n<!DOCTYPE html>\n<html>\n <head>\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n <title>chat<\/title>\n <\/head>\n <body>\n <label>chat basic<\/label>\n <ul id=\"messages\"><\/ul><\/mark>\n <form id=\"form\" action=\"\">\n <input type=\"text\" id=\"input\" autocomplete=\"off\" \/><button>Send<\/button>\n <\/form>\n <script src=\"\/socket.io\/socket.io.js\"><\/script><\/mark>\n <script>\n let counter = 0;\n \n const socket = io();<\/mark>\n const form = document.getElementById('form');\n const input = document.getElementById('input');\n const messages = document.getElementById('messages');\n \n input.focus();<\/mark>\n form.addEventListener('submit', (e) => {<\/mark>\n console.log(input.value);\n e.preventDefault();<\/mark>\n if (input.value) { \n socket.emit('chat message', input.value);<\/mark>\n input.value = '';\n input.focus();\n }\n });<\/mark>\n\n socket.on('chat message', (msg) => {\n const item = document.createElement('li');\n item.textContent = msg;\n messages.appendChild(item);\n window.scrollTo(0, document.body.scrollHeight);\n });<\/mark>\n\n <\/script> \n \n <\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"index.html : \ud074\ub77c\uc774\uc5b8\ud2b8 \ubd80\ubd84 Client partindex.js : \uc11c\ubc84\ubd80\ubd84 Server part – \uae30\ubcf8 \ucc44\ud305 \ud504\ub85c\uadf8\ub7a8\uc785\ub2c8\ub2e4.– \uc774\uc804 \ud3ec\uc2a4\ud2b8 \ubd80\ubd84\uc744(\uc2e4\uc2dc\uac04 \ud1b5\uc2e0) \uc798 \uc774\ud574\ud55c\ub2e4\uba74 \uc774\ubc88 \ubd80\ubd84\ub3c4 \ud06c\uac8c \uc5b4\ub835\uc9c0 \uc54a\uc744 \uac81\ub2c8\ub2e4.– \ub179\uc0c9 \uceec\ub7ec\ub85c \uac15\uc870\ub41c \ubd80\ubd84\uc740 \uc18c\ucf13 \ud1b5\uc2e0 \ubaa8\ub4c8\uacfc \uad00\ub828 \uc788\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4.– \ud14d\uc2a4\ud2b8\ud544\ub4dc\uc5d0 \uc785\ub825\ub41c \uba54\uc138\uc9c0\ub97c \uc18c\ucf13 \ud1b5\uc2e0\uc73c\ub85c \uc11c\ubc84\uc5d0 \ubcf4\ub0b4\uba74 \uc11c\ubc84\uac00 \ub2e4\uc2dc \ubaa8\ub4e0 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uac8c \uba54\uc138\uc9c0\ub97c \ubcf4\ub0c5\ub2c8\ub2e4. – input.focus() : \ud14d\uc2a4\ud2b8\ud544\ub4dc\uc5d0 \ud56d\uc0c1 \ud3ec\ucee4\uc2a4\ub97c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-630","post","type-post","status-publish","format-standard","hentry","category-nodejs","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=630"}],"version-history":[{"count":9,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/630\/revisions"}],"predecessor-version":[{"id":640,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/630\/revisions\/640"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}