![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/02\/img2.png\")
<\/a><\/p>\nNodeJS:<\/h4>\n
Node.js functions as a runtime environment that enables JavaScript code to operate outside the confines of a conventional web browser. Real-time application management is made easy using Node.js’s non-blocking, event-driven design, which leverages the Chrome V8 JavaScript engine. Its emphasis is on efficiency and responsiveness.<\/p>\n
GridDB:<\/h4>\n
GridDB is particularly effective in real-time Internet of Things applications. It guarantees dependable and quick access with minimal latency and effective data management. GridDB is a great tool for efficient data management in chat apps since it is designed for real-time processing.<\/p>\n
Express:<\/h4>\n
Express is a Node.js web application framework that offers numerous features for creating mobile and web applications. It is employed to build single-page, multipage, and hybrid web applications. As an overlay on top of Node.js, Express streamlines server and route management<\/p>\n
Socket.io:<\/h4>\n
A library called Socket.io is intended for real-time, event-driven web applications. It allows two-way communication between web clients and servers.<\/p>\n
Prerequisites:<\/h2>\n\n- It is essential to have a basic grasp of JavaScript.<\/li>\n
- Make sure that Node and NPM are installed on your computer.<\/li>\n<\/ul>\n
Step-by-Step configuration:<\/h4>\n
![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/02\/img3.png\")
<\/a>
\nCreate a folder by using the command:<\/p>\n\nmkdir folder_name<\/code><\/pre>\n<\/div>\nChange the current working directory by using the command:<\/p>\n
\ncd folder_name<\/code><\/pre>\n<\/div>\nAfter that, open the folder you just created in Visual Studio Code, and to launch a new project, run the command:<\/p>\n
\nnpm init -y<\/code><\/pre>\n<\/div>\nThe output will look like this:<\/p>\n
![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/02\/img4.png\")
<\/a><\/p>\nNow, to install Express, use the command:<\/p>\n
\nnpm install -save express<\/code><\/pre>\n<\/div>\nNow install socket.io using the command:<\/p>\n
\nnpm install -save socket.io<\/code><\/pre>\n<\/div>\nSetting Up GridDB:<\/h4>\n
<\/p>\n
Run the following commands on the system\u2019s terminal.<\/p>\n
To install with rpm, run the commands:<\/p>\n
First, create the apt repo file by using:<\/p>\n
\nsudo sh -c 'echo \"deb https:\/\/www.griddb.net\/apt griddb\/5.3 multiverse\" >> \/etc\/apt\/sources.list.d\/griddb.list'<\/code><\/pre>\n<\/div>\nThen import the key by using:<\/p>\n
\nwget -qO - https:\/\/www.griddb.net\/apt\/griddb.asc | sudo apt-key add -<\/code><\/pre>\n<\/div>\nNext, check for the updates using:<\/p>\n
\nsudo apt update<\/code><\/pre>\n<\/div>\nFinally, install GridDB by using:<\/p>\n
\nsudo apt install griddb-meta<\/code><\/pre>\n<\/div>\nStart the GridDB Server by using:<\/p>\n
\nsudo systemctl start gridstore<\/code><\/pre>\n<\/div>\nStop the server by using:<\/p>\n
\nsudo systemctl stop gridstore<\/code><\/pre>\n<\/div>\nChange the default password of admin by using the command:<\/p>\n
\nexport GS_HOME=\/var\/lib\/gridstore\/\nexport GS_LOG=\/var\/lib\/gridstore\/log\/\ngs_passwd admin\n<\/code><\/pre>\n<\/div>\nDue to the absence of an init script in the GridDB Community Edition, GridDB must be started manually. Establish the service’s connection to other nodes after it has been started.<\/p>\n
\ngs_startnode -u username\/password\ngs_joincluster -u admin\/admin<\/code><\/pre>\n<\/div>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/02\/start_node.png\")
<\/a>
\nYou can verify the status of GridDB by using the command:<\/p>\n\ngs_stat -u admin\/admin<\/code><\/pre>\n<\/div>\nOutput:<\/strong>
\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/02\/gs_stat.png\")
<\/a><\/p>\n<\/p>\n
Then, create a file (in Visual Studio Code) called server.js that Node will use to function as the server.<\/p>\n
Add the following code to it:<\/strong><\/p>\n\nconst express = require(\"express\");\nconst socketio = require(\"socket.io\");\nconst http = require(\"http\");\nconst app = express();\nconst griddb = require(\"griddb-node-api\");\n\nconst PORT = 3000;\nconst HOST = \"0.0.0.0\";\nconst server = http.createServer(app);\nconst io = socketio(server);\nconst factory = griddb.StoreFactory.getInstance();\nconst store = factory.getStore({\n notificationMember: \"127.0.0.1:10001\",\n clusterName: \"myCluster\",\n username: \"admin\",\n password: \"admin\",\n});\n\n\/\/ Schema\nvar timeConInfo = new griddb.ContainerInfo({\n name: \"Chat\",\n columnInfoList: [\n [\"timestamp\", griddb.Type.TIMESTAMP],\n [\"username\", griddb.Type.STRING],\n [\"message\", griddb.Type.STRING],\n ],\n type: griddb.ContainerType.TIME_SERIES,\n rowKey: true,\n});\n\n\/\/ Function to handle the \"chat_message\" event and store the message in GridDB\nasync function handleChatMessage(data) {\n try {\n let time_series;\n store\n .putContainer(timeConInfo, false)\n .then((ts) => {\n time_series = ts;\n return ts.put([new Date(), data.username, data.message]);\n })\n .then(() => {\n query = time_series.query(\n \"select * where timestamp > TIMESTAMPADD(HOUR, NOW(), -6)\"\n );\n return query.fetch();\n })\n .then((rowset) => {\n while (rowset.hasNext()) {\n var row = rowset.next();\n console.log(\n \"Time =\",\n row[0],\n \"User =\",\n row[1].toString(),\n \"Text =\",\n row[2]\n );\n }\n })\n .catch((err) => {\n if (err.constructor.name == \"GSException\") {\n for (var i = 0; i < err.getErrorStackSize(); i++) {\n console.log(\"[\", i, \"]\");\n console.log(err.getErrorCode(i));\n console.log(err.getMessage(i));\n }\n } else {\n console.log(err);\n }\n });\n\n console.log(\"Chat message stored successfully.\");\n } catch (error) {\n console.error(\"Error storing chat message:\", error);\n }\n}\n\n\/\/ Fetch all data\nconst FetchAll = async function () {\n const container = await store.getContainer(\"Chat\");\n\n const query = container.query(\n \"select * where timestamp > TIMESTAMPADD(HOUR, NOW(), -6)\"\n );\n const rowSet = await query.fetch();\n let res = [];\n while (rowSet.hasNext()) {\n const row = await rowSet.next();\n console.log(\"Name:\", row[1].toString(), \"Message:\", row[2]);\n res.push({ username: row[1].toString(), message: row[2] });\n }\n return res;\n};\n\napp.use(express.static(__dirname + \"\/public\"));\n\napp.get(\"\/\", (req, res) => {\n res.sendFile(__dirname + \"\/public\/index.html\");\n});\n\nio.on(\"connection\", (socket) => {\n console.log(\"A user connected: \", socket.id);\n\n socket.on(\"user_join\", (username) => {\n io.emit(\"user_join\", username);\n });\n\n socket.on(\"chat_message\", (data) => {\n io.emit(\"chat_message\", data);\n handleChatMessage(data);\n });\n\n socket.on(\"disconnect\", () => {\n console.log(\"User disconnected\");\n });\n});\n\napp.get(\"\/\", (req, res) => {\n res.send(\"Hello, World\");\n});\n\napp.get(\"\/api\/messages\", async (req, res) => {\n const response = await FetchAll();\n res.send(response);\n});\n\napp.post(\"\/api\/put\", async (req, res) => {\n const { username, message } = req.query;\n let data = {\n username,\n message,\n };\n handleChatMessage(data);\n\n res.send(\"done\");\n});\n\nserver.listen(PORT, HOST);\nconsole.log(`Running on http:\/\/${HOST}:${PORT}`);<\/code><\/pre>\n<\/div>\nExplanation of the code:<\/h3>\n
The above code creates a real-time chat server using Express, Socket.io, and GridDB. It connects to GridDB to store and retrieve chat messages in a time-series container with timestamp, username, and message columns. The server records user connections, disconnections, and chat messages. The handleChatMessage<\/code> function asynchronously stores chat messages in GridDB. The server uses Express for the web interface and Socket-io for real-time communication. The code effectively integrates these technologies for a comprehensive chat server.<\/p>\nGridDB Initialization and Configuration<\/h3>\n
GridDB Store Initialization:<\/p>\n
\nconst factory = griddb.StoreFactory.getInstance();\nconst store = factory.getStore({...});<\/code><\/pre>\n<\/div>\nThese lines initialize the connection to the GridDB store. StoreFactory.getInstance()<\/code> fetches an instance of the store factory, and getStore() is then used to create a store connection with configuration details such as the cluster name, notification member (server address), and credentials.<\/p>\nDefining the Chat Container Schema:<\/h4>\n
var timeConInfo = new griddb.ContainerInfo({...});<\/code>
\nThis section defines the schema for a GridDB container named Chat<\/code>. Containers in GridDB are similar to tables in relational databases. The schema specifies the data columns: a timestamp, a username, and a message, which are essential for a chat application. The type of the container is set to TIME_SERIES<\/code>, indicating that the data is time-sequenced, which is apt for chat messages.<\/p>\nCreating\/Accessing the Chat Container and Initial Data Insertion:<\/h4>\n
The store.putContainer()<\/code> method is used to either create a new container or access an existing one based on the provided schema. The code inserts a sample record into the time series container.<\/p>\nGridDB Data Handling in Chat Application<\/h4>\n
Querying Recent Messages:<\/strong><\/p>\nThe code includes a query to retrieve messages from the last six hours. This is done using time_series.query()<\/code>, demonstrating how GridDB can efficiently handle time-based queries, a common requirement in chat applications for fetching recent messages.<\/p>\nInserting Chat Messages:<\/strong><\/p>\nThe handleChatMessage function is an asynchronous function that handles the storage of chat messages into the GridDB container. Each message, along with its timestamp and the sender’s username, is inserted into the Chat<\/code> container. This function illustrates how new data is added to GridDB in real-time.<\/p>\nLet\u2019s create an index.html<\/code> file by clicking New File.<\/code><\/p>\nAdd the following code to it:<\/strong><\/p>\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Chat App<\/title>\n <meta\n name=\"viewport\"\n content=\"width=device-width,minimum-scale=1,initial-scale=1\"\n \/>\n <style>\n body {\n margin: 0;\n font-family: sans-serif;\n }\n\n form {\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n display: flex;\n box-sizing: border-box;\n padding: 0.25rem;\n }\n\n form input {\n border: 0;\n padding: 0.5rem;\n width: 100%;\n outline: 0;\n margin-right: 0.5rem;\n border-radius: 0.25rem;\n background: #ccc;\n }\n\n form button {\n width: 6rem;\n background-color: #1b8c00;\n color: white;\n border: none;\n padding: 0.5rem;\n cursor: pointer;\n border-radius: 0.25rem;\n text-transform: uppercase;\n }\n\n form button:hover {\n background-color: #166d01;\n }\n\n .messages {\n margin: 0;\n padding: 0;\n margin-bottom: 3rem;\n }\n\n .messages li {\n padding: 0.5rem;\n }\n\n .messages li:nth-child(odd) {\n background: #eee;\n }\n <\/style>\n <\/head>\n <body>\n <ul class=\"messages\"><\/ul>\n <form>\n <input type=\"text\" class=\"input\" autocomplete=\"off\" autofocus \/>\n <button>Send<\/button>\n <\/form>\n <!--Client side-->\n <script src=\"\/socket.io\/socket.io.js\"><\/script>\n\n <script>\n const form = document.querySelector(\"form\");\n const input = document.querySelector(\".input\");\n const messages = document.querySelector(\".messages\");\n const username = prompt(\"Please Enter Your Name\");\n const socket = io();\n\n form.addEventListener(\n \"submit\",\n function (event) {\n event.preventDefault();\n\n \/\/ addMessage(username + \": \" + input.value);\n\n socket.emit(\"chat_message\", {\n username: username,\n message: input.value,\n });\n\n input.value = \"\";\n return false;\n },\n false\n );\n\n socket.on(\"chat_message\", function (data) {\n addMessage(data.username + \": \" + data.message);\n });\n\n socket.on(\"user_join\", function (data) {\n addMessage(data + \" Has Joined\");\n fetch(\"\/api\/messages\", {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((res) => {\n res\n .json()\n .then((data) => {\n console.log(data);\n data.forEach((message) => {\n addMessage(message.username + \": \" + message.message);\n });\n })\n .catch((err) => {\n console.log(err);\n });\n })\n .catch((err) => {\n console.log(err);\n });\n });\n\n socket.on(\"user_leave\", function (data) {\n addMessage(data + \" Has Left\");\n });\n socket.on(\"disconnect\", function () {\n addMessage(\"You Have Disconnected\");\n });\n\n addMessage(\"You Have Joined As \" + username);\n socket.emit(\"user_join\", username);\n\n function addMessage(message) {\n const li = document.createElement(\"li\");\n li.innerHTML = message;\n messages.appendChild(li);\n window.scrollTo(0, document.body.scrollHeight);\n }\n <\/script>\n <\/body>\n<\/html><\/code><\/pre>\n<\/div>\nExplanation of the code:<\/strong><\/p>\nThe above code represents the client-side part of a real-time chat program. Using a <style> section to incorporate styling, the structure is conventional HTML5. An unordered list of chat messages is included in the body, along with a fixed form with an input field and a ‘Send’ button at the bottom for message entry. Real-time communication is made possible by the embedded JavaScript connecting to the server using the Socket.io framework. Login requires user input, and some activities, such as submitting a form, cause the server to receive Socket.io events. Additionally, the script updates the user interface dynamically by listening to different server-sent events.<\/p>\n
Output:<\/strong><\/p>\n![\"\"](\"https:\/\/griddb.net\/wp-content\/uploads\/2024\/02\/ld_lib.png\")
<\/a><\/p>\nThen, run the application by running the following command:<\/p>\n
\nnode server.js<\/code><\/pre>\n<\/div>\n
Step-by-Step configuration:<\/h4>\n
Change the current working directory by using the command:<\/p>\n After that, open the folder you just created in Visual Studio Code, and to launch a new project, run the command:<\/p>\n The output will look like this:<\/p>\n Now, to install Express, use the command:<\/p>\n Now install socket.io using the command:<\/p>\n <\/p>\n Run the following commands on the system\u2019s terminal.<\/p>\n To install with rpm, run the commands:<\/p>\n First, create the apt repo file by using:<\/p>\n Then import the key by using:<\/p>\n Next, check for the updates using:<\/p>\n Finally, install GridDB by using:<\/p>\n Start the GridDB Server by using:<\/p>\n Stop the server by using:<\/p>\n Change the default password of admin by using the command:<\/p>\n Due to the absence of an init script in the GridDB Community Edition, GridDB must be started manually. Establish the service’s connection to other nodes after it has been started.<\/p>\n Output:<\/strong> <\/p>\n Then, create a file (in Visual Studio Code) called server.js that Node will use to function as the server.<\/p>\n Add the following code to it:<\/strong><\/p>\n The above code creates a real-time chat server using Express, Socket.io, and GridDB. It connects to GridDB to store and retrieve chat messages in a time-series container with timestamp, username, and message columns. The server records user connections, disconnections, and chat messages. The GridDB Store Initialization:<\/p>\n These lines initialize the connection to the GridDB store. The Querying Recent Messages:<\/strong><\/p>\n The code includes a query to retrieve messages from the last six hours. This is done using Inserting Chat Messages:<\/strong><\/p>\n The handleChatMessage function is an asynchronous function that handles the storage of chat messages into the GridDB container. Each message, along with its timestamp and the sender’s username, is inserted into the Let\u2019s create an Add the following code to it:<\/strong><\/p>\n Explanation of the code:<\/strong><\/p>\n The above code represents the client-side part of a real-time chat program. Using a <style> section to incorporate styling, the structure is conventional HTML5. An unordered list of chat messages is included in the body, along with a fixed form with an input field and a ‘Send’ button at the bottom for message entry. Real-time communication is made possible by the embedded JavaScript connecting to the server using the Socket.io framework. Login requires user input, and some activities, such as submitting a form, cause the server to receive Socket.io events. Additionally, the script updates the user interface dynamically by listening to different server-sent events.<\/p>\n Output:<\/strong><\/p>\n Then, run the application by running the following command:<\/p>\n<\/a>
\nCreate a folder by using the command:<\/p>\nmkdir folder_name<\/code><\/pre>\n<\/div>\ncd folder_name<\/code><\/pre>\n<\/div>\nnpm init -y<\/code><\/pre>\n<\/div>\n<\/a><\/p>\nnpm install -save express<\/code><\/pre>\n<\/div>\nnpm install -save socket.io<\/code><\/pre>\n<\/div>\nSetting Up GridDB:<\/h4>\n
sudo sh -c 'echo \"deb https:\/\/www.griddb.net\/apt griddb\/5.3 multiverse\" >> \/etc\/apt\/sources.list.d\/griddb.list'<\/code><\/pre>\n<\/div>\nwget -qO - https:\/\/www.griddb.net\/apt\/griddb.asc | sudo apt-key add -<\/code><\/pre>\n<\/div>\nsudo apt update<\/code><\/pre>\n<\/div>\nsudo apt install griddb-meta<\/code><\/pre>\n<\/div>\nsudo systemctl start gridstore<\/code><\/pre>\n<\/div>\nsudo systemctl stop gridstore<\/code><\/pre>\n<\/div>\nexport GS_HOME=\/var\/lib\/gridstore\/\nexport GS_LOG=\/var\/lib\/gridstore\/log\/\ngs_passwd admin\n<\/code><\/pre>\n<\/div>\ngs_startnode -u username\/password\ngs_joincluster -u admin\/admin<\/code><\/pre>\n<\/div>\n<\/a>
\nYou can verify the status of GridDB by using the command:<\/p>\ngs_stat -u admin\/admin<\/code><\/pre>\n<\/div>\n
\n<\/a><\/p>\nconst express = require(\"express\");\nconst socketio = require(\"socket.io\");\nconst http = require(\"http\");\nconst app = express();\nconst griddb = require(\"griddb-node-api\");\n\nconst PORT = 3000;\nconst HOST = \"0.0.0.0\";\nconst server = http.createServer(app);\nconst io = socketio(server);\nconst factory = griddb.StoreFactory.getInstance();\nconst store = factory.getStore({\n notificationMember: \"127.0.0.1:10001\",\n clusterName: \"myCluster\",\n username: \"admin\",\n password: \"admin\",\n});\n\n\/\/ Schema\nvar timeConInfo = new griddb.ContainerInfo({\n name: \"Chat\",\n columnInfoList: [\n [\"timestamp\", griddb.Type.TIMESTAMP],\n [\"username\", griddb.Type.STRING],\n [\"message\", griddb.Type.STRING],\n ],\n type: griddb.ContainerType.TIME_SERIES,\n rowKey: true,\n});\n\n\/\/ Function to handle the \"chat_message\" event and store the message in GridDB\nasync function handleChatMessage(data) {\n try {\n let time_series;\n store\n .putContainer(timeConInfo, false)\n .then((ts) => {\n time_series = ts;\n return ts.put([new Date(), data.username, data.message]);\n })\n .then(() => {\n query = time_series.query(\n \"select * where timestamp > TIMESTAMPADD(HOUR, NOW(), -6)\"\n );\n return query.fetch();\n })\n .then((rowset) => {\n while (rowset.hasNext()) {\n var row = rowset.next();\n console.log(\n \"Time =\",\n row[0],\n \"User =\",\n row[1].toString(),\n \"Text =\",\n row[2]\n );\n }\n })\n .catch((err) => {\n if (err.constructor.name == \"GSException\") {\n for (var i = 0; i < err.getErrorStackSize(); i++) {\n console.log(\"[\", i, \"]\");\n console.log(err.getErrorCode(i));\n console.log(err.getMessage(i));\n }\n } else {\n console.log(err);\n }\n });\n\n console.log(\"Chat message stored successfully.\");\n } catch (error) {\n console.error(\"Error storing chat message:\", error);\n }\n}\n\n\/\/ Fetch all data\nconst FetchAll = async function () {\n const container = await store.getContainer(\"Chat\");\n\n const query = container.query(\n \"select * where timestamp > TIMESTAMPADD(HOUR, NOW(), -6)\"\n );\n const rowSet = await query.fetch();\n let res = [];\n while (rowSet.hasNext()) {\n const row = await rowSet.next();\n console.log(\"Name:\", row[1].toString(), \"Message:\", row[2]);\n res.push({ username: row[1].toString(), message: row[2] });\n }\n return res;\n};\n\napp.use(express.static(__dirname + \"\/public\"));\n\napp.get(\"\/\", (req, res) => {\n res.sendFile(__dirname + \"\/public\/index.html\");\n});\n\nio.on(\"connection\", (socket) => {\n console.log(\"A user connected: \", socket.id);\n\n socket.on(\"user_join\", (username) => {\n io.emit(\"user_join\", username);\n });\n\n socket.on(\"chat_message\", (data) => {\n io.emit(\"chat_message\", data);\n handleChatMessage(data);\n });\n\n socket.on(\"disconnect\", () => {\n console.log(\"User disconnected\");\n });\n});\n\napp.get(\"\/\", (req, res) => {\n res.send(\"Hello, World\");\n});\n\napp.get(\"\/api\/messages\", async (req, res) => {\n const response = await FetchAll();\n res.send(response);\n});\n\napp.post(\"\/api\/put\", async (req, res) => {\n const { username, message } = req.query;\n let data = {\n username,\n message,\n };\n handleChatMessage(data);\n\n res.send(\"done\");\n});\n\nserver.listen(PORT, HOST);\nconsole.log(`Running on http:\/\/${HOST}:${PORT}`);<\/code><\/pre>\n<\/div>\nExplanation of the code:<\/h3>\n
handleChatMessage<\/code> function asynchronously stores chat messages in GridDB. The server uses Express for the web interface and Socket-io for real-time communication. The code effectively integrates these technologies for a comprehensive chat server.<\/p>\nGridDB Initialization and Configuration<\/h3>\n
const factory = griddb.StoreFactory.getInstance();\nconst store = factory.getStore({...});<\/code><\/pre>\n<\/div>\nStoreFactory.getInstance()<\/code> fetches an instance of the store factory, and getStore() is then used to create a store connection with configuration details such as the cluster name, notification member (server address), and credentials.<\/p>\nDefining the Chat Container Schema:<\/h4>\n
var timeConInfo = new griddb.ContainerInfo({...});<\/code>
\nThis section defines the schema for a GridDB container named Chat<\/code>. Containers in GridDB are similar to tables in relational databases. The schema specifies the data columns: a timestamp, a username, and a message, which are essential for a chat application. The type of the container is set to TIME_SERIES<\/code>, indicating that the data is time-sequenced, which is apt for chat messages.<\/p>\nCreating\/Accessing the Chat Container and Initial Data Insertion:<\/h4>\n
store.putContainer()<\/code> method is used to either create a new container or access an existing one based on the provided schema. The code inserts a sample record into the time series container.<\/p>\nGridDB Data Handling in Chat Application<\/h4>\n
time_series.query()<\/code>, demonstrating how GridDB can efficiently handle time-based queries, a common requirement in chat applications for fetching recent messages.<\/p>\nChat<\/code> container. This function illustrates how new data is added to GridDB in real-time.<\/p>\nindex.html<\/code> file by clicking New File.<\/code><\/p>\n<!DOCTYPE html>\n<html>\n <head>\n <title>Chat App<\/title>\n <meta\n name=\"viewport\"\n content=\"width=device-width,minimum-scale=1,initial-scale=1\"\n \/>\n <style>\n body {\n margin: 0;\n font-family: sans-serif;\n }\n\n form {\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n display: flex;\n box-sizing: border-box;\n padding: 0.25rem;\n }\n\n form input {\n border: 0;\n padding: 0.5rem;\n width: 100%;\n outline: 0;\n margin-right: 0.5rem;\n border-radius: 0.25rem;\n background: #ccc;\n }\n\n form button {\n width: 6rem;\n background-color: #1b8c00;\n color: white;\n border: none;\n padding: 0.5rem;\n cursor: pointer;\n border-radius: 0.25rem;\n text-transform: uppercase;\n }\n\n form button:hover {\n background-color: #166d01;\n }\n\n .messages {\n margin: 0;\n padding: 0;\n margin-bottom: 3rem;\n }\n\n .messages li {\n padding: 0.5rem;\n }\n\n .messages li:nth-child(odd) {\n background: #eee;\n }\n <\/style>\n <\/head>\n <body>\n <ul class=\"messages\"><\/ul>\n <form>\n <input type=\"text\" class=\"input\" autocomplete=\"off\" autofocus \/>\n <button>Send<\/button>\n <\/form>\n <!--Client side-->\n <script src=\"\/socket.io\/socket.io.js\"><\/script>\n\n <script>\n const form = document.querySelector(\"form\");\n const input = document.querySelector(\".input\");\n const messages = document.querySelector(\".messages\");\n const username = prompt(\"Please Enter Your Name\");\n const socket = io();\n\n form.addEventListener(\n \"submit\",\n function (event) {\n event.preventDefault();\n\n \/\/ addMessage(username + \": \" + input.value);\n\n socket.emit(\"chat_message\", {\n username: username,\n message: input.value,\n });\n\n input.value = \"\";\n return false;\n },\n false\n );\n\n socket.on(\"chat_message\", function (data) {\n addMessage(data.username + \": \" + data.message);\n });\n\n socket.on(\"user_join\", function (data) {\n addMessage(data + \" Has Joined\");\n fetch(\"\/api\/messages\", {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application\/json\",\n },\n })\n .then((res) => {\n res\n .json()\n .then((data) => {\n console.log(data);\n data.forEach((message) => {\n addMessage(message.username + \": \" + message.message);\n });\n })\n .catch((err) => {\n console.log(err);\n });\n })\n .catch((err) => {\n console.log(err);\n });\n });\n\n socket.on(\"user_leave\", function (data) {\n addMessage(data + \" Has Left\");\n });\n socket.on(\"disconnect\", function () {\n addMessage(\"You Have Disconnected\");\n });\n\n addMessage(\"You Have Joined As \" + username);\n socket.emit(\"user_join\", username);\n\n function addMessage(message) {\n const li = document.createElement(\"li\");\n li.innerHTML = message;\n messages.appendChild(li);\n window.scrollTo(0, document.body.scrollHeight);\n }\n <\/script>\n <\/body>\n<\/html><\/code><\/pre>\n<\/div>\n<\/a><\/p>\nnode server.js<\/code><\/pre>\n<\/div>\n