免責事項：この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。
説明するH5チャットアプリケーション
プロジェクトショーケース
問題の概要
繰り返し一人のユーザがログインします
既に背景に記録されたアレイのARと比べて、各入力のユーザ名が、それは繰り返しがある場合ことを意味します。
// 生成数组 var ar=""; socket.on('array', function (val) { ar = val; // console.log(ar);}); if(ar.indexOf(lo.value)==-1){ sweetAlert("恭喜您，登录成功！"); socket.emit('setName', lo.value.trim()); names1(lo.value.trim()); login1.style.display="none"; document.querySelector(".bg").style.display = "none"; document.querySelector(".cd span").style.display = "none"; document.querySelector(".title img").style.display = "block"; document.querySelector(".fix").style.display = "block" ; document.querySelector(".title").style.display = "block" ; document.querySelector(".tit").innerText=lo.value.trim(); document.querySelector(".swal-button").onclick = function () { document.getElementById("text").focus(); document.querySelector(".fix").addEventListener('click', function (e) { if (e.target.nodeName === "LI"&&e.target.innerText != document.querySelector(".tit").innerText) { document.querySelector(".fix").style.display="none"; document.querySelector(".chat_b").style.display="block"; document.querySelector(".box").style.display="block"; document.querySelector(".tit").innerText = e.target.innerText; document.querySelector("#text").focus(); onOff=true; } else{ sweetAlert("不能跟自己聊天哦~"); } }) } } else{ sweetAlert("不能重复登录哦！"); return }自分自身に話していません
同じ情報かどうかを判断するためにクリックしてください
if (e.target.nodeName === "LI"&&e.target.innerText != document.querySelector(".tit").innerText) { document.querySelector(".fix").style.display="none"; document.querySelector(".chat_b").style.display="block"; document.querySelector(".box").style.display="block"; document.querySelector(".tit").innerText = e.target.innerText; document.querySelector("#text").focus(); onOff=true; } else{ sweetAlert("不能跟自己聊天哦~"); }情報を保存する方法を伝統的な価値観、どのように、データベースを使用していない、AJAXを使用しないでください。
背景に送信）（socket.emitを使用することができ、次いでsocket.on（）がリッスン。
// 传名 function names(value) { this.name=value; socket.emit("reg", name); } function names1(value) { this.name1 = value; socket.emit("join", name1); document.title = name1 + "的臻美 Chat" }// 传密码 function pass(value){ socket.emit("pass", value); } socket.on("join", function (user) { this.na = user; }) socket.on("reg", function (user) { this.na1 = user; }) socket.on("pass", function (val) { // console.log(val); })// 监听后台名 var users2 = ""; socket.on('users', function (users) { users2 = users; // console.log(users2); }); // 监听后台密码 var pass2="" socket.on('pass', function (val) { pass2 = val; // console.log(pass2) });書かれた文書によって保存されたデータをフロントは、入力されました。
//名字socket.on("reg", function (name) { usocket[name] = socket; this.i1=name; io.emit("reg", name); var myname =this.i1+"\n"; fs.writeFile('./user.xls', myname, { 'flag': 'a' }, function (err) { if (err) { throw err; } // 写入成功后读取测试 fs.readFile('./user.xls', 'utf-8', function (err,data) { if (err) { throw err; } }); }); }) // 密码socket.on("pass",function(val){ pass[val]=socket; this.i2=val; io.emit("pass", val); var password=this.i2+"\n"; fs.writeFile('./password.xls', password, { 'flag': 'a' }, function (err) { if (err) { throw err; } }); })プライベートメッセージを達成する方法
プライベートソケットを生成し、各ユーザーに提供するために、
// 获取在线function broadcast() { io.sockets.emit("dataval", hashName);}//提供私有 socketfunction privateSocket(toId) { return (_.findWhere(io.sockets.sockets, { id: toId }));}// 封装删除function removeByValue(arr, val) { for (var i = 0; i < arr.length; i++) { if (arr[i] == val) { arr.splice(i, 1); break; } }}// 连接 socketvar io=ws(server);io.on("connection",function(socket){// 写入成功后读取测试fs.readFile('./user.xls', 'utf-8', function (err, data) { if(data!=null){ var value = data.split('\n'); io.sockets.emit("users", value); }});// 写入成功后读取测试fs.readFile('./password.xls', 'utf-8', function (err,data) { if(data!=null){ var pass1=data.split('\n'); io.sockets.emit("pass", pass1); }}); broadcast();// 生成名字socket.on('setName', function (data) { var name = data; hashName[name] = socket.id; // console.log(hashName[name]); broadcast();});// 私聊发送socket.on('sayTo', function (data) { var toName = data.to; var toId; console.log(toName); if (toId = hashName[toName]) { privateSocket(toId).emit('message1', data); }});ユーザリストにログインするには、2人の以上のユーザーが空のように見える、リアルタイム更新リスト
配列を再使用するには、各オンラインユーザーは、再割り当てをキャプチャします
// 统计在线人数var arrh=[] socket.on('dataval', function (val) { vf = val; console.log(vf); for (let i = 0; i < vf.length; i++) { // uu++ arrh.push(vf[i]) console.log(arrh) } var rf = [...new Set(arrh)] console.log(rf) rf=vf for (let j = 0; j < rf.length; j++) { var li = document.createElement("li"); li.classList.add("active"); li.innerText = rf[j] console.log(rf[j]) socket.emit("time", rf[j]); document.querySelector(".fix").appendChild(li); } }); socket.on('join', function (val) { document.querySelector(".fix").innerHTML = '' }) socket.on('disconnect', function (val) { document.querySelector(".fix").innerHTML = '' })メッセージをオフラインで送信
function sock () { return io.connect("localhost:3003");}// 心跳机制document.addEventListener('visibilitychange', function () { if (document.visibilityState == 'hidden') { //记录页面隐藏时间 sock() console.log('隐藏了') }})var socket = sock()続きを読む：http://gitbook.cn/gitchat/activity/5d71fe9bf755eb3ccec58272
あなたはまた、ああ、よりGitChat排他的な技術的な内容を読んで、CSDNコミュニティの品質のオリジナルコンテンツGitChatアプリをダウンロードすることができます。
