hay
hi man please aprove my post content
> npm install --save express socket.io <code> Let's start from a minimalistic express application that can serve static files. Create a file called main.js. Here's how my minimal express app looks: <javascript> const express = require('express'); const http = require('http'); const app = express(); const server = http.createServer(app); app.use(express.static(`${__dirname}/public`)); server.listen(3000, () => console.log('Ready on 0.0.0.0:3000')); </javascript> Notice that I had to use node.js standard module `http` to create server instead of using Express right away. We will need that `server` object later when we'll initialize socket.io. The folder called `public` is the one to keep our static client-side files. Let's create `index.html` right away. Usually I would separate JavaScript code in a separate file, but for this tutorial, I'll keep it all in one file for the sake of readability and navigation. <html4strict> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>File Upload</title> </head> <body> <ul id="chat"> </ul> <form id="say-form"> <input><button type="submit">Say</button> </form> <script></script> </body> </html> </html4strict> As you see I added some very basic chat controls to this page and placed `<script>` tag for our client-side JS. Let's write some helper chat functions in our client JS. Put the following code in between `<script>` tags. <html4strict> <script> function onChatMessage(msg) { var ul = document.querySelector('#chat'); var item = document.createElement('li'); item.innerHTML = msg; ul.appendChild(item); } function sendChatMessage(e) { e.preventDefault(); var inp = document.querySelector('#say-form input'); var msg = inp.value; inp.value = ''; // Replace later with actual sending code onChatMessage(msg); } (function init() { var form = document.querySelector('#say-form'); form.addEventListener('submit', sendChatMessage); })(); </script> </html4strict> This code simply displays the message that you send through the form back on the page. This chat is not yet connected to server (and of course you will not see any other user's messages this way). Let's add some Socket.IO magic to this project and connect all the chats. First thing to do is to initialise socket.io on server. Add the follwowin code to your `main.js` file as follows: <javascript> const io = require('socket.io')(server); io.on('connection', (sock) => { sock.emit('msg', 'You are connected'); }); </javascript> This code accepts connection from the client and sends back an event of type `msg` to everyone who connected. The only thing we need to do now is to connect the client and display the message! Let's edit our client-side HTML code again: <javascript> <script src="/socket.io/socket.io.js"></script> <script> var sock = io(); sock.on('msg', onChatMessage); /* rest of the code stays the same */ </javascript> With just that two lines, we will connect to our server and display the message on a page whenever server sends us something. You can test it right now! Once you open http://localhost:3000, you'll see the welcome message from the server! Now let's make client talk back to server and send a message each time a user is typing something in chat. <javascript> io.on('connection', (sock) => { sock.emit('msg', 'You are connected'); sock.on('msg', (msg) => io.emit('msg', msg)); }); </javascript> Now, whenever the server receives `msg` from one of the clients, it will broadcast the same message back to everybody who is connected right now. Test it again! Open two browser windows and start sending messages and you'll see that the chat is working! Congratulations! In about 30 lines of JavaScript code you managed to build a functional real-time chat with Node.js and Socket.IO. Let's review the completed code: main.js (server) <javascript> const express = require('express'); const http = require('http'); const app = express(); const server = http.createServer(app); const io = require('socket.io')(server); io.on('connection', (sock) => { sock.emit('msg', 'You are connected'); sock.on('msg', (msg) => io.emit('msg', msg)); }); app.use(express.static(`${__dirname}/public`)); server.listen(3000, () => console.log('Ready on 0.0.0.0:3000')); </javascript> index.html (client) <html5> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>File Upload</title> </head> <body> <ul id="chat"></ul> <form id="say-form"> <input><button type="submit">Say</button> </form> <script src="/socket.io/socket.io.js"></script> <script> var sock = io(); sock.on('msg', onChatMessage); function onChatMessage(msg) { var ul = document.querySelector('#chat'); var item = document.createElement('li'); item.innerHTML = msg; ul.appendChild(item); } function sendChatMessage(e) { e.preventDefault(); var inp = document.querySelector('#say-form input'); var msg = inp.value; inp.value = ''; sock.emit('msg', msg); } (function init() { var form = document.querySelector('#say-form'); form.addEventListener('submit', sendChatMessage); })(); </script> </body> </html> </html5>