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) } }
