Socket在線聊天室
- 2019 年 10 月 10 日
- 筆記
因為剛好課上學socket，寫一個聊天室吧。socket.io封裝的很好，不用自己寫，有空可以自己用socket api試試。
Node.js後端
使用express、http、socket.io提供的功能搭建簡單的socket伺服器。就很簡單，監聽socket連接並向所有用戶轉發message事件的內容。
let app = require('express')(); let http = require('http').createServer(app); let io = require('socket.io')(http); app.get("/",function(req,res){ res.send('<p>OK!</p>'); }); http.listen(3000,function(){ console.log("listening on 3000") }); io.on('connection',function(socket){ console.log('created connection'); socket.on('disconnect',function(){ console.log('disconnect') }) socket.on('message',function(val){ io.emit('message',val) }) })
前端
這段js植入html頁面，或者webpack server。接收到伺服器message事件時，向列表添加li元素，點擊button時向伺服器發送message事件。
const ul =document.createElement("ul"); ul.id="messages"; document.body.appendChild(ul); const input = document.createElement("input"); document.body.appendChild(input); const button = document.createElement("button"); button.innerHTML="submit"; document.body.appendChild(button); const socket=document.createElement("script"); socket.src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"; document.body.appendChild(socket); socket.onload=function(){ let socket = io('http://guohere.com:3000/') socket.on('message',function(val){ const li =document.createElement("li"); li.innerText=val; ul.appendChild(li); }) button.onclick=function(){ socket.emit('message',input.value) } }
