– server_socket.js : \uc11c\ubc84\ubd80\ubd84
– socket.html : 1\ucd08\ub9c8\ub2e4 \uce74\uc6b4\ud130 \uc2e4\ud589,\uc18c\ucf13\uc744\ud1b5\ud574 \uce74\uc6b4\ud130 \uac12\uc744 \uc804\uc1a1
– socCounter.html : \uc18c\ucf13\ud1b5\uc2e0\uc744 \ud1b5\ud574\uc11c \uc11c\ubc84\ub85c\ubd80\ud130 \uce74\uc6b4\ud130 \uac12\uc744 \uc218\uc2e0\ud558\uc5ec \ud654\uba74\uc5d0 \ud45c\uc2dc<\/p>\n\n\n\n
– server_socket.js : Server Part
– socket.html : Run counter every second, transmit counter value through socket
– socCounter.html : Receives the counter value from the server through socket communication and displays it on the screen.<\/p>\n\n\n\n
– \uc18c\ucf13\uc744 \uc774\uc6a9\ud574\uc11c \uc2e4\uc2dc\uac04 \ud1b5\uc2e0\uc744 \uad6c\ud604\ud558\ub294 \uac83\uc740 \uc608\uc804\ubd80\ud130 \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub358 \ub0b4\uc6a9\uc785\ub2c8\ub2e4.
– \uc608\uc804\uc5d0\ub294 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc2e4\uc2dc\uac04 \ud1b5\uc2e0\uc744 \uad6c\ud604\ud558\ub824\uba74 \uc790\ubc14,C#\uac19\uc740 \uae30\ud0c0 \ub2e4\ub978 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub85c \uad6c\ud604\ud574\uc57c \ud588\uc2b5\ub2c8\ub2e4.
– NODEJS\ub294 \uc774\ub7f0 \uc18c\ucf13\ud1b5\uc2e0\uc744 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc0ac\uc6a9 \ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc90d\ub2c8\ub2e4.
– \uc774\ub7f0 \uc18c\ucf13\ud1b5\uc2e0\uc774 \uc0ac\uc6a9\ub418\ub294 \uacf3\uc740 \uc6b0\ub9ac\uac00 \ud754\ud788 \ubcf4\ub294 \ud504\ub85c\uadf8\ub7a8\uc911\uc5d0 \ucc44\ud305\ud504\ub85c\uadf8\ub7a8\uc774\ub098,\uc8fc\uc2dd\ucc28\ud2b8,sns\uc758 \uc88b\uc544\uc694 \ub4f1\uc5d0\uc11c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.
– \uc18c\ucf13\uc774\ub780 \ubd80\ubd84\uc758 \uc774\ud574\uac00 \uc5b4\ub835\ub2e4\uba74 \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub098 \ud14d\uc2a4\ud2b8\ud30c\uc77c\uc774\ub77c\uace0 \uc0dd\uac01\ud558\uc138\uc694<\/p>\n\n\n\n
– Implementing real-time communication using sockets has been widely used for a long time.
– In the past, to implement real-time communication in browsers, it had to be implemented in other programming languages \u200b\u200bsuch as Java and C#.
– NODEJS allows this kind of socket communication to be used in the browser.
– Places where this type of socket communication is used can be found in chat programs, stock charts, social media likes, etc., among the programs we commonly see.
– If you have difficulty understanding the socket part, think of it as a database or text file.
<\/p>\n\n\n\n
1.\uc124\uce58 install<\/strong><\/p>\n\n\n\n \ub2e4\uc74c\uacfc \uac19\uc774 \ubaa8\ub4c8\uc744 \uc124\uce58 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. 2.\uc11c\ubc84\ubd80\ubd84 Server Part<\/strong><\/p>\n\n\n\n – \uc911\uc694\ud55c \ucf54\ub4dc \ubd80\ubd84\ub9cc \uc0b4\ud3b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. – Let’s look at only the important parts of the code. 2.\ud074\ub77c\uc774\uc5b8\ud2b8 \ubd80\ubd84 Client part<\/strong> – The client part is socket.html and socket.html part. 4.\uc804\uccb4\ucf54\ub4dc(Full Code)<\/strong><\/p>\n\n\n\n – server_socket.js : \uc11c\ubc84\ubd80\ubd84– socket.html : 1\ucd08\ub9c8\ub2e4 \uce74\uc6b4\ud130 \uc2e4\ud589,\uc18c\ucf13\uc744\ud1b5\ud574 \uce74\uc6b4\ud130 \uac12\uc744 \uc804\uc1a1– socCounter.html : \uc18c\ucf13\ud1b5\uc2e0\uc744 \ud1b5\ud574\uc11c \uc11c\ubc84\ub85c\ubd80\ud130 \uce74\uc6b4\ud130 \uac12\uc744 \uc218\uc2e0\ud558\uc5ec \ud654\uba74\uc5d0 \ud45c\uc2dc – server_socket.js : Server Part– socket.html : Run counter every second, transmit counter value through socket– socCounter.html : Receives the counter value from the server through socket communication and displays it on the […]<\/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-607","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\/607","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=607"}],"version-history":[{"count":18,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/607\/revisions"}],"predecessor-version":[{"id":628,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/607\/revisions\/628"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You can install the module as follows<\/p>\n\n\n\n# npm install socket.io<\/code><\/pre>\n\n\n\n
– io.on(‘connection’, (socket) => {} : \uc774 \ubd80\ubd84\uc740 \uc11c\ubc84\uc5d0\uc11c \uc18c\ucf13 \uc811\uc18d\uc744 \uae30\ub2e4\ub9ac\uba70 \uc811\uc18d \ub420 \uacbd\uc6b0 {} \ub0b4\ubd80\uc758 \ucf54\ub4dc\ub97c \uc2e4\ud589 \ud569\ub2c8\ub2e4.
– ‘connectiont’\ubd80\ubd84\uc740 \uc18c\ucf13 \ud0a4 \uac12\uc73c\ub85c \ubcc0\uc218\ub77c\uace0 \uc0dd\uac01\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.
– socket.on(‘message’, (msg) => {} : \uc18c\ucf13\uc5d0\uc11c \uce74\uc6b4\ud130 \uac12\uc744 \uc77d\uc5b4 \uc624\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4.
– io.emit(‘socMessage’, msg); : \uc774 \ubd80\ubd84\uc774 \uc18c\ucf13\uc5d0 \uba54\uc138\uc9c0(\uce74\uc6b4\ud130 \uac12)\ub97c \uc791\uc131\ud558\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4. \uc11c\ubc84 \uc18c\ucf13\uc5d0 \uc811\uc18d\ud558\uba74 \ubaa8\ub4e0 \uc0ac\uc6a9\uc790\uac00 \uc774 \uba54\uc138\uc9c0(\uce74\uc6b4\ud130 \uac12)\uc744 \uc77d\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
– socket.on(‘disconnect’, () => {} : \uc774 \ubd80\ubd84\uc740 \uc0ac\uc6a9\uc790\uac00 \uc11c\ubc84\uc5d0\uc11c \uc811\uc18d \ud574\uc81c\ub420 \ub54c {] \uc774 \ubd80\ubd84\uc758 \ucf54\ub4dc\uac00 \uc2e4\ud589\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
– io.on(‘connection’, (socket) => {}: This part waits for a socket connection from the server and executes the code inside {} when connected.
– You can think of the ‘connectiont’ part as a variable as the socket key value.
– socket.on(‘message’, (msg) => {}: This is the part that reads the counter value from the socket.
– This part is where a message (counter value) is written to the socket. Any user can read this message (counter value) by connecting to the server socket.
– socket.on(‘disconnect’, () => {} : This part of the code is executed when the user disconnects from the server {].<\/p>\n\n\n\n...\nconst { Server } = require('socket.io');\n...\nconst io = new Server(server);\n...\nio.on('connection', (socket) => {\n ...\n\n socket.on('socMessage', (msg) => {\n console.log('socket count: ' + msg);\n io.emit('socMessage', msg);\n });\n ....\n\n});\n...<\/code><\/pre>\n\n\n\n
– \ud074\ub77c\uc774\uc5b8\ud2b8 \ubd80\ubd84\uc740 socket.html\uacfc socket.html\ubd80\ubd84\uc785\ub2c8\ub2e4.
– <script src=”\/socket.io\/socket.io.js”><\/script> : html\ud30c\uc77c\uc5d0\uc11c \uc18c\ucf13 \ubaa8\ub4c8\uc744 \uc0ac\uc6a9\ud558\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4.
– \ucf54\ub4dc\uac00 \ubcf5\uc7a1\ud574 \ubcf4\uc774\uc9c0\ub9cc \uc11c\ubc84 \ubd80\ubd84\uacfc \uc911\ubcf5\ub429\ub2c8\ub2e4.
– socket.on(‘message’, (msg) => {} : \uc18c\ucf13\uc758 \uba54\uc138\uc9c0\ub97c \uc77d\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4.
– socket.emit(‘socMessage’, i); : \uc18c\ucf13\uc5d0 \uba54\uc138\uc9c0\ub97c \uc791\uc131\ud558\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
– This is the part that uses the socket module in the html file.
– The code may seem complicated, but it overlaps with the server part.
– socket.on(‘message’, (msg) => {}: This is the part that reads the message from the socket.
– socket.emit(‘socMessage’, i); : This is the part that writes a message to the socket.<\/p>\n\n\n\n...\n<script src=\"\/socket.io\/socket.io.js\"><\/script>\n...\n socket.on('message', (msg) => {\n ...\n });\n\n ...\n socket.emit('socMessage', i);\n ...\n <\/code><\/pre>\n\n\n\n\nserver_socket.js\n\n\/\/server_socket.js\nconst http = require('http');\nconst express = require('express');\nconst { Server } = require('socket.io');<\/mark>\nconst app = express();\nconst server = http.createServer(app);\nconst io = new Server(server);<\/mark>\n\n\/* routing *\/\n\/\/ root\napp.get(\"\/\",(req,res)=>{\n\tres.sendFile(__dirname + \"\/socket.html\");\n});\n\n\/\/ socCounter\napp.get(\"\/soccounter\",(req,res)=>{\n\tres.sendFile(__dirname + \"\/socCounter.html\");\n});\n\n\/\/ socket connection\nio.on('connection', (socket) => {\n console.log('a user connected');\n \n \/\/ user disconnet\n socket.on('disconnect', () => {\n console.log('user disconnected');\n });\n\n \/\/client message\n socket.on('message', (msg) => {\n console.log('socket emit message: ' + msg);\n io.emit('message', msg);\n });\n\n socket.on('socMessage', (msg) => {\n console.log('socket count: ' + msg);\n io.emit('socMessage', msg);\n });\n\n});<\/mark>\n\n\n\n\/\/ Start the server\nconst PORT = process.env.PORT || 3000;\nserver.listen(PORT, () => {\n console.log(`CommonJS(Express) Server is running on port ${PORT}`);\n});\n<\/code><\/pre>\n\n\n\nsocket.html\n\n<html>\n <head>\n <title>\n socket test\n <\/title>\n <\/head>\n <body>\n <!-- socket message -->\n <ul id=\"messages\"><\/ul><br>\n <ul id=\"countmsg\"><\/ul><br>\n <\/body>\n <script src=\"\/socket.io\/socket.io.js\"><\/script><\/mark>\n <script> \n const messages = document.getElementById('messages');\n const countermsg = document.getElementById('countmsg'); \n const socket = io(); <\/mark>\n\n socket.emit('message', 'Hello Socket!!');<\/mark>\n socket.on('message', (msg) => {<\/mark>\n\n const item = document.createElement('li');\n item.textContent = msg;\n messages.appendChild(item);\n\n });<\/mark>\n\n let i = 0;\n function socCounter(){\n i++;\n\n \/\/ Append message\n \/*\n const item = document.createElement('li');\n item.textContent = i;\n countermsg.appendChild(item);\n console.log(i);\n *\/\n\n \/\/ counter\n countermsg.innerHTML = i;\n socket.emit('socMessage', i);<\/mark>\n\n }<\/mark>\n\n setInterval(socCounter, 1000);\n \n <\/script>\n<\/html><\/code><\/pre>\n\n\n\nsocCounter.html\n\n<html>\n <head>\n <title>\n socket test\n <\/title>\n <\/head>\n <body>\n <form id=\"socketForm\">\n <!-- socket message -->\n count receiver<br>\n <ul id=\"countmsg\"><\/ul><br>\n <\/form>\n <\/body>\n <script src=\"\/socket.io\/socket.io.js\"><\/script><\/mark>\n <script> \n const messages = document.getElementById('messages');\n const countermsg = document.getElementById('countmsg'); \n const socket = io(); <\/mark>\n\n socket.on('socMessage', (msg) => {\n countermsg.innerHTML = msg;\n });<\/mark>\n \n <\/script>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"