百度t7 課程， websocket 實現簡單聊天室
阿新 • • 發佈：2018-12-09
最簡單的聊天室，我寫了一個小時，
寫了10 分鐘，除錯50分鐘
因為 我是小菜鳥，不過凡事都有過程
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <!-- 基本小樣式 --> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } ul li p{ background: #ccc; color:white; } ul li h1 { color:#bfa; } </style> <!-- 1, 引入socket.io --> <script type="text/javascript" src="http://localhost:3000/socket.io/socket.io.js"></script> <script type="text/javascript"> 'use strict' let nameVal =''; window.onload =function(){ let oP = document.getElementById('p1'); let content = document.getElementById('content') let Obtn= document.getElementById('send') let oUl = document.getElementById('oUl') let name = document.getElementById('name') let psw = document.getElementById('psw') let login = document.getElementById('login') function addLi(msg,name){ let nameVal2 = nameVal; if(name!=''){ nameVal2 = name; } let oLi = document.createElement('li') oLi.innerHTML= `<h1>${nameVal2}</h1> <p>${msg}</p>` oUl.append(oLi) } // 連線伺服器端：// 後端儲存socket 地址： let sock=io.connect('ws://localhost:3000/'); login.onclick = function(){ nameVal = name.value; let pswVal = psw.value sock.emit('login',nameVal) } Obtn.onclick = function(){ let msg= content.value; if(msg==''){ alert('訊息不能為空') return; } addLi(msg,nameVal) console.log(nameVal) sock.emit('msg',msg,name.value) } sock.on('msg',function(msg,nameVal){ addLi(msg,nameVal) }) } </script> </head> <body> <h1>歡迎來到主頁！！</h1> <input type="text" id="name"></input><br> <input type="text" id="psw"></input><br> <input type="button" value="login" id='login' /> <textarea id="content" value="" rows="10" cols="50"> </textarea> <button id ="send"> 傳送訊息</button> <ul id="oUl"> <li> <h1 >action</h1> <p>action is power!!</p> </li> </ul> </body> </html>
2, 後端hello.js
let http = require('http') let fs = require('fs') let io = require('socket.io') let server = http.createServer(function(req,res){ fs.readFile(`public/index.html`, (err, data)=>{ if(err){ res.writeHeader(404); res.write('not found'); }else{ res.write(data); } res.end(); }); }) server.listen(3000) let server2 = io.listen(server) let sockets = []; let currentName = ''; server2.on('connection',function(socket){ console.log('socket link success!') sockets.push(socket) socket.on('login',function(username){ currentName= username; console.log('login success') console.log('currentName',currentName) }) socket.on('msg',function(msg,nameVal){ // 訊息拿到之後，就可以迴圈傳送了！ console.log(msg , nameVal)\ // 資訊到這裡沒問題！ // 過濾的操作 let otherSocket = sockets.filter(item=>item!=socket) for(let i = 0;i<otherSocket.length;i++){ otherSocket[i].emit('msg',msg,nameVal) } }) })
最後顯示效果
總結，我沒有進行頁面優化，比如是自己寫的一個樣式
不是自己寫的另外一個樣式，這些無非就是className 切換
其實邏輯很簡單
就是 後臺接收訊息，然後轉發就行了！
一個for 迴圈 的事情！
用人話，就是後臺， 來一個請求，我就把你存進陣列中， 當你向發訊息時，我就把
挨著牌的向陣列中的sock 進行轉發就行了！
這次練習，不在於你寫多了，在於你要養成敲程式碼的感覺！