How to build a websocket chat application simply and quickly with node.js

Initialize project

npm init

install nodejs-websocket

npm install nodejs-websocket

Create and edit the startup file

Create a file called app.js file , And edit it .

var ws = require("nodejs-websocket"); console.log(" Start connection ...") var [user1,user2,user1Ready,user2Ready] = [null,null,false,false]; ws.createServer(function(conn){ conn.on("text", function (str) { console.log(" The information received is :"+str) if(str==="user1"){ user1 = conn; user1Ready = true; } if(str==="user2"){ user2 = conn; user2Ready = true; } if(user2Ready){ user2.sendText(str); } if(user1Ready){ user1.sendText(str); } }) conn.on("close", function (code, reason) { console.log(" Close the connection ") }); conn.on("error", function (code, reason) { console.log(" Abnormal shutdown ") }); }).listen(8001) console.log("WebSocket Set up ")

Create and edit two user page files respectively

Create separate user1.html and user2.html, And edit them .

「user1.html」

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>user1</title> <style> #mes{ width: 300px; height: 300px; border: 1px solid #666; overflow: auto; margin-bottom:10px; padding: 5px; } li{ text-decoration: none; background: #f4f4f4; padding: 5px; margin-top: 5px; } .tl{ color: red; text-align: left; } .tr{ color: green; text-align: right; } </style> </head> <body> <ul id="mes"></ul> <div class="kuang"> <input type="text" value="" class="int"> <button class="send"> send out </button> </div> <script> var mes = document.getElementById("mes"); if(window.WebSocket){ var ws = new WebSocket('ws://localhost:8001'); ws.onopen = function(e){ console.log(" Successfully connected to the server "); ws.send("user1"); } ws.onmessage = function(e){ if(e.data!=="user1"&&e.data!=="user2"){ console.log(e); var newData = JSON.parse(e.data); var node=document.createElement("LI"); var textnode=document.createTextNode(newData.mes); node.appendChild(textnode); if(newData.name==="user2"){ node.classList.add("tl") mes.appendChild(node); } else{ node.classList.add("tr") mes.appendChild(node); } } document.querySelector(".send").onclick = function(e){ var obj = { name:"user1", mes:document.querySelector(".int").value } ws.send(JSON.stringify(obj)); document.querySelector(".int").value=""; } } ws.onclose = function(e){ console.log(" Server down "); } ws.onerror = function(){ console.log(" link error "); } } </script> </body> </html>

「user2.html」

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>user2</title> <style> #mes{ width: 300px; height: 300px; border: 1px solid #666; overflow: auto; margin-bottom:10px; padding: 5px; } li{ text-decoration: none; background: #f4f4f4; padding: 5px; margin-top: 5px; } .tl{ color: red; text-align: left; } .tr{ color: green; text-align: right; } </style> </head> <body> <ul id="mes"></ul> <div class="kuang"> <input type="text" value="" class="int"> <button class="send"> send out </button> </div> <script> var mes = document.getElementById("mes"); if(window.WebSocket){ var ws = new WebSocket('ws://localhost:8001'); ws.onopen = function(e){ console.log(" Successfully connected to the server "); ws.send("user2"); } ws.onmessage = function(e){ if(e.data!=="user1"&&e.data!=="user2"){ console.log(e); var newData = JSON.parse(e.data); var node=document.createElement("LI"); var textnode=document.createTextNode(newData.mes); node.appendChild(textnode); if(newData.name==="user1"){ node.classList.add("tl") mes.appendChild(node); } else{ node.classList.add("tr") mes.appendChild(node); } } document.querySelector(".send").onclick = function(e){ var obj = { name:"user2", mes:document.querySelector(".int").value } ws.send(JSON.stringify(obj)); document.querySelector(".int").value=""; } } ws.onclose = function(e){ console.log(" Server down "); } ws.onerror = function(){ console.log(" link error "); } } </script> </body> </html>

Start project

node app.js

*

author ：「Vam The golden bean road 」

Main areas ：「 The front-end development 」

My WeChat ：「maomin9761」

WeChat official account ：「 The road ahead 」

*

This article is from the official account of WeChat The road ahead original https://www.helloworld.net/redirect?target=https://mp.weixin.qq.com/s/oZ3Zht4MRLJLOhy4B7QMxw, If there is any infringement , Please contact to delete .