用socket.io.js和express实现一个简单的对话框
服务端用node.js，使用express
npm install --save express
npm install --save socket.io
在目录里创建一个app.js作为node项目的入口
app.js代码：
// 使用 express 框架 var app = require('express')(); var server = require('http').Server(app); // 引入 socket.io var io = require('socket.io')(server); // 监听 80 端口 server.listen(3000,function(){ console.log("服务器启动成功") }); // io 各种事件 io.on('connection', function (socket) { console.log('websocket has connected') socket.emit('message', { hello: '欢迎链接' }); socket.on('say', function (data) { console.log(data); if (data.my === '走，一起吃饭吧') { socket.emit('eating', { hello: '果断走起呀！' }); return } io.sockets.emit('news', { hello: data.my });//socket等价于io.sockets }); });
然后运行 node app就启动了node后台，坐等客户端来交互了
客户端代码：创建一个index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>socket</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="https://cdn.staticfile.org/socket.io/2.3.0/socket.io.js"></script> <script> // 实例化socket socket = io.connect('http://127.0.0.1:3000'); // 监听 message 会话 socket.on('message', function (data) { console.log(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>
打开页面就可以和聊天了：
效果图：
。
