初始化项目
npm init
安装nodejs-websocket
npm install nodejs-websocket
创建并编辑启动文件
创建一个名为app.js文件，并且编辑它。
var ws = require("nodejs-websocket"); console.log("开始建立连接...") var [user1,user2,user1Ready,user2Ready] = [null,null,false,false]; ws.createServer(function(conn){ conn.on("text", function (str) { console.log("收到的信息为:"+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("关闭连接") }); conn.on("error", function (code, reason) { console.log("异常关闭") }); }).listen(8001) console.log("WebSocket建立完毕")
分别创建并编辑两个用户页面文件
分别创建user1.html和user2.html， 并且编辑它们。
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">发送</button> </div> <script> var mes = document.getElementById("mes"); if(window.WebSocket){ var ws = new WebSocket('ws://localhost:8001'); ws.onopen = function(e){ console.log("连接服务器成功"); 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("服务器关闭"); } ws.onerror = function(){ console.log("连接出错"); } } </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">发送</button> </div> <script> var mes = document.getElementById("mes"); if(window.WebSocket){ var ws = new WebSocket('ws://localhost:8001'); ws.onopen = function(e){ console.log("连接服务器成功"); 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("服务器关闭"); } ws.onerror = function(){ console.log("连接出错"); } } </script> </body> </html>
启动项目
node app.js
