使用koa和socket.io简单搭建多人聊天流程
koa与socket.io简单流程分析:
1. 服务端触发初始化io.on('connection', socket => {}); 2. 客户端发送say会话socket.emit('say', '我是客户端'); 3. 服务端监听say会话socket.on('say',data => {}); 4. 服务端发送message会话socket.emit('message', {hello: '你是谁'}); 5. 客户端接收message消息socket.on('message', (data) => {});
服务端:
const koa = require('koa'); const app = new koa(); const server = require('http').Server(app.callback()) const io = require('socket.io')(server); const port = 8081; server.listen(process.env.PORT || port, () => { console.log(`app run at : http://127.0.0.1:${port}`); }) io.on('connection', socket => { console.log('socket初始化完成'); socket.on('say', data => { console.log(data, '接收到的信息') socket.emit('message', {hello: '你是谁'}) }) })
客户端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> input { background-color: #fff; background-image: none; border-radius: 4px; border: 1px solid #bfcbd9; box-sizing: border-box; color: #1f2d3d; font-size: inherit; height: 40px; line-height: 1; outline: 0; padding: 3px 10px; } .el-button--primary { color: #fff; background-color: #20a0ff; border-color: #20a0ff; } .el-button { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #00aac5; border: 1px solid #c4c4c4; color: #fff; margin: 0; padding: 10px 15px; border-radius: 4px; outline: 0; text-align: center; } </style> </head> <body> <div> <div id="content"> </div> </div> <div> <input type="text" id="input"> <button class="el-button el-button--primary el-button--large" type="button" onclick="say()"><span>发送消息</span></button> </div> <script src="./socket.io.js"></script> <script> // 建立连接 var socket = io.connect('http://localhost:8081'); // 监听 message 会话 socket.on('message', function (data) { let html = document.createElement('p') html.innerHTML = `系统消息:<span>${data.hello}</span>` document.getElementById('content').appendChild(html) console.log(data); }); // 按钮点击事件 function say() { let t = document.getElementById('input').value if (!t) return let html = document.createElement('p') html.innerHTML = `你细声说:<span>${t}</span>` document.getElementById('content').appendChild(html) socket.emit('say', { my: t}); } // 监听 news 会话 socket.on('news', function (data) { console.log(data); let html = document.createElement('p') html.innerHTML = `小皮咖说:<span>我知道了,你说“${data.hello}”</span>` document.getElementById('content').appendChild(html) }); // 监听吃饭会话 socket.on('eating', function (data) { console.log(data); let html = document.createElement('p') html.innerHTML = `小皮咖说:${data.hello}` document.getElementById('content').appendChild(html) }); </script> </body> </html>
相关推荐
一叶梧桐 2020-10-14
lzzyok 2020-10-10
digwtx 2020-09-14
efeve 2020-09-14
poplpsure 2020-08-17
ITxiaobaibai 2020-07-26
libowenhit 2020-07-23
luckykapok 2020-07-06
hongsheyoumo 2020-06-27
jannal 2020-06-21
lanmantech 2020-06-16
咻咻ing 2020-06-16
weibingbingnet 2020-06-14
woyanyouxin 2020-06-04
houjinkai 2020-06-03
txj 2020-06-02
Chydar 2020-05-15