const express &＃61; require(&＃39;express&＃39;);const app &＃61; express();const server &＃61; require(&＃39;http&＃39;).createServer(app);const io &＃61; require(&＃39;socket.io&＃39;).listen(server).sockets;app.get(&＃39;/&＃39;,(req,res) &＃61;> {res.sendFile(__dirname&＃43;&＃39;/index.html&＃39;);});let connectedUser &＃61;[];// 一个客户端io对应一个服务端ioio.on("connection", socket &＃61;>{console.log("a user connected");updateUserName();let userName &＃61; &＃39;&＃39;;//loginsocket.on(&＃39;login&＃39;, (name, callback) &＃61;>{if(name.trim().length &＃61;&＃61;&＃61;0){return;}callback(true);userName&＃61; name;connectedUser.push(userName);// console.log(connectedUser);updateUserName();})//receive chat messagesocket.on(&＃39;chat message&＃39;, msg &＃61;>{console.log(msg);//emit message dataio.emit("output", {name:userName,msg:msg});})//disconnectsocket.on(&＃39;disconnect&＃39;, () &＃61;>{console.log(&＃39;disconneted&＃39;);connectedUser.splice(connectedUser.indexOf(userName),1);console.log(connectedUser);updateUserName();});function updateUserName(){io.emit(&＃39;loadUser&＃39;,connectedUser);}})const port &＃61; process.env.PORT || 5000;server.listen(port , () &＃61;>{console.log(&＃39;server running...&＃39;);});
DOCTYPE html><html><head><link href &＃61; "https://fonts.googleapis.com/icon?family&＃61;Material&＃43;Icons" rel &＃61;"stylesheet"><link rel&＃61;"stylesheet" href&＃61;"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"><meta name &＃61; "viewpoint" content &＃61; "width-device-width, initial-scale&＃61;1.0" /><title>Let&＃39;s Chat!title>head><body><nav><div class &＃61; "nav-wrapper "><a href&＃61;"#" class &＃61; "brand-logo center"> Let&＃39;s Chat!a>div>nav><div class &＃61; "row"><div class &＃61; "col s4"><h3 class &＃61; "flow-text center teal-text text-lighten-1">CONNECTED USERh3><ul class &＃61; "collection" id &＃61; "user-list">ul>div><div id &＃61; "chat-col" class&＃61;"col s8" style&＃61;"display:none"><div class&＃61;"card blue-grey darken-1"><div class&＃61;"card-content white-text" id &＃61;"messages">div><div class&＃61;"card-action white"><form id&＃61;"message-form"><div class &＃61;"input-field"><textarea type &＃61; "text" id &＃61; "textarea" class &＃61;"materialize-textarea">textarea><label class&＃61;"active" for &＃61; "textarea">MESSAGElabel>div><div class&＃61;"right-align"><button class&＃61;"btn waves-effect waves-light btn-small" type&＃61;"submit" name &＃61; "action">SEND<i class &＃61; "material-icons right">sendi>button>div>form>div>div>div><div id &＃61; "login-col" class&＃61;"col s8" style&＃61;"display:block"><div class&＃61;"card"><div class&＃61; "card-content"><span class&＃61;"card-title teal-text text-lighten-1">Give yourself a nicknamespan><form id &＃61; "login-form"><div class&＃61;"input-field"><input type &＃61; "text" id &＃61; "name"><label class&＃61;"active" for &＃61; "name">Namelabel>div><div class &＃61; "right-align"><button class &＃61; "btn waves-effect waves-light btn-small" type&＃61;"submit" name &＃61; "action">Let&＃39;s Chat!<i class &＃61; "material-icons right">chati>button>div>form>div>div>div>div><script src&＃61;"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">script><script src &＃61; "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js">script><script>(function(){//get elementconst loginForm &＃61; document.getElementById(&＃39;login-form&＃39;);const messageForm &＃61; document.getElementById(&＃39;message-form&＃39;);const messages &＃61; document.getElementById(&＃39;messages&＃39;);const userList &＃61; document.getElementById(&＃39;user-list&＃39;);const loginCol &＃61; document.getElementById(&＃39;login-col&＃39;);const chatCol &＃61; document.getElementById(&＃39;chat-col&＃39;);// connect to socket.iovar socket &＃61; io({&＃39;timeout&＃39;:5000, &＃39;connect timeout&＃39;:5000});//check for connectionsif(socket !&＃61;&＃61; undefined){console.log(&＃39;connected to socket&＃39;);}// Update user listsocket.on("loadUser", users &＃61;> {userList.innerHTML &＃61; ""users.forEach(user &＃61;> {var userLi &＃61; document.createElement("li")userLi.setAttribute("class", "collection-item")userLi.innerHTML &＃61; &＃96;${user}&＃96;userList.insertBefore(userLi, userList.lastChild)})})// submit login formloginForm.addEventListener(&＃39;submit&＃39;,e &＃61;> {e.preventDefault();const userName &＃61; document.getElementById(&＃39;name&＃39;).value;//emit loginsocket.emit(&＃39;login&＃39;, userName, () &＃61;> {loginCol.style &＃61; "display:none";chatCol.style &＃61; "display: block";//add welcome messagelet message &＃61; document.createElement(&＃39;p&＃39;);message.setAttribute(&＃39;class&＃39;,&＃39;center blue-grey-text text-lighten-2&＃39;);message.textContent &＃61; &＃96;Welcome ${userName} joined Chat!&＃96;;messages.appendChild(message)messages.insertBefore(message, messages.lastElementChild)})})// Submit MessagemessageForm.addEventListener("submit", e &＃61;> {e.preventDefault()const msg &＃61; document.querySelector("textarea").valuedocument.querySelector("textarea").value &＃61; ""socket.emit("chat message", msg)})// Add message to cardsocket.on("output", data &＃61;> {let message &＃61; document.createElement("h6")message.textContent &＃61; data.name &＃43; ": " &＃43; data.msgmessages.appendChild(message)messages.insertBefore(message, messages.lastChild)})})();script>body>html>
京公网安备 11010802041100号