\nnpm install express socket.io\n<\/pre><\/div>\n\n\nCreate an index.js<\/code> file to start building your server:<\/p>\n\n\n\n\/\/ index.js\n\nconst express = require('express');\nconst http = require('http');\nconst socketIO = require('socket.io');\n\nconst app = express();\nconst server = http.createServer(app);\nconst io = socketIO(server);\n\napp.get('\/', (req, res) => {\n res.sendFile(__dirname + '\/index.html');\n});\n\nserver.listen(3000, () => {\n console.log('Server is running on http:\/\/localhost:3000');\n});\n<\/pre><\/div>\n\n\nStep 2: Create the HTML file<\/h2><\/p>\n\n\n\n
Create a simple HTML file (index.html<\/code>) to serve as the entry point for your application:<\/p>\n\n\n\n<!-- index.html -->\n\n<!-- ... (previous HTML code) -->\n\n<body>\n <h1>Welcome to the Collab App<\/h1>\n\n <!-- Form for setting the username -->\n <form id="username-form">\n <label for="username">Enter your username:<\/label>\n <input type="text" id="username" required>\n <button type="submit">Set Username<\/button>\n <\/form>\n\n <!-- Your collaborative app interface goes here -->\n <div id="messages-container"><\/div>\n <form id="message-form">\n <input type="text" id="message-input" placeholder="Type your message..." required>\n <button type="submit">Send<\/button>\n <\/form>\n\n <script src="\/socket.io\/socket.io.js"><\/script>\n <script src="\/main.js"><\/script>\n<\/body>\n<\/pre><\/div>\n\n\nStep 3: Implement WebSocket Communication<\/h2>\n\n\n\n
Create a main.js<\/code> file to handle WebSocket communication:<\/p>\n\n\n\n\/\/ main.js\n\nconst socket = io();\n\n\/\/ DOM elements\nconst messageForm = document.getElementById('message-form');\nconst messageInput = document.getElementById('message-input');\nconst messagesContainer = document.getElementById('messages-container');\n\n\/\/ Function to append messages to the UI\nfunction appendMessage(username, message) {\n const messageElement = document.createElement('div');\n messageElement.innerHTML = `<strong>${username}:<\/strong> ${message}`;\n messagesContainer.appendChild(messageElement);\n}\n\n\/\/ Event listener for form submission (sending messages)\nmessageForm.addEventListener('submit', (event) => {\n event.preventDefault();\n const message = messageInput.value.trim();\n if (message !== '') {\n socket.emit('message', message);\n appendMessage('You', message); \/\/ Display the sent message immediately\n messageInput.value = ''; \/\/ Clear the input field\n }\n});\n\n\/\/ Handle a new user joining\nsocket.on('user joined', (username) => {\n appendMessage('System', `${username} joined the collaboration`);\n});\n\n\/\/ Handle receiving messages\nsocket.on('message', (data) => {\n appendMessage('User', data); \/\/ Assuming all received messages are from a user named 'User'\n});\n<\/pre><\/div>\n\n\nExtend your index.js<\/code> file to handle WebSocket connections:<\/p>\n\n\n\n\/\/ index.js\n\nconst express = require('express');\nconst http = require('http');\nconst socketIO = require('socket.io');\n\nconst app = express();\nconst server = http.createServer(app);\nconst io = socketIO(server);\n\napp.use(express.static('public')); \/\/ Serve static files from the 'public' directory\n\napp.get('\/', (req, res) => {\n res.sendFile(__dirname + '\/index.html');\n});\n\nconst users = new Map(); \/\/ Map to store connected users and their corresponding sockets\n\nio.on('connection', (socket) => {\n console.log('A user connected');\n\n \/\/ Prompt the user for their username\n socket.emit('message', 'Please enter your username.');\n\n \/\/ Handle setting and broadcasting usernames\n socket.on('setUsername', (username) => {\n users.set(socket.id, username);\n socket.emit('message', `Welcome to the collaboration, ${username}!`);\n socket.broadcast.emit('user joined', username);\n });\n\n \/\/ Handle messages from clients\n socket.on('message', (data) => {\n const username = users.get(socket.id) || 'Anonymous';\n io.emit('message', `${username}: ${data}`);\n });\n\n \/\/ Handle disconnection\n socket.on('disconnect', () => {\n const username = users.get(socket.id) || 'Anonymous';\n users.delete(socket.id);\n io.emit('message', `${username} left the collaboration`);\n });\n});\n\nconst PORT = process.env.PORT || 3000;\n\nserver.listen(PORT, () => {\n console.log(`Server is running on http:\/\/localhost:${PORT}`);\n});\n<\/pre><\/div>\n\n\nStep 4: Run Your Application<\/h2>\n\n\n\n
Back in your terminal, run the following command to start your server:<\/p>\n\n\n
\nnode index.js\n<\/pre><\/div>\n\n\nVisit http:\/\/localhost:3000<\/code> in your web browser to see your real time collaborative app in action.<\/p>\n\n\n\nWe sincerely hope you enjoyed reading this post. Although this tutorial is minimal, you may make your application better by including features like file sharing, user authentication and cooperation exchange. There are countless ways to develop dynamic real time web tools with WebSockets. Have fun with coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
The development of real time tools has increased among modern web professionals. WebSockets is a useful tool that enables real time communication between clients and servers, whether you are developing a communication image tool, a live chat application, or a collaborative document editor In this article we will walk you through a they use WebSockets […]<\/p>\n","protected":false},"author":1,"featured_media":229,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[10,40,41,42],"class_list":["post-226","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-how-to","tag-javascript","tag-nodejs","tag-websockets"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/davagordon.co.uk\/blog\/wp-json\/wp\/v2\/posts\/226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davagordon.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davagordon.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davagordon.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davagordon.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":10,"href":"https:\/\/davagordon.co.uk\/blog\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"predecessor-version":[{"id":241,"href":"https:\/\/davagordon.co.uk\/blog\/wp-json\/wp\/v2\/posts\/226\/revisions\/241"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davagordon.co.uk\/blog\/wp-json\/wp\/v2\/media\/229"}],"wp:attachment":[{"href":"https:\/\/davagordon.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davagordon.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davagordon.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}