socket.io做一个简单的聊天案例
聊天功能开发
新建一个文件夹,就叫:chat-room吧
一、初始化 npm init 并下载express和 socket.io安装包
npm install express --save npm install socket.io --save
新建服务器文件server.js和静态文件,目录结构如下:
二、先把静态页面弄出来
这里引用了bootstrap的布局样式,布局样式直接使用
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<style> /*这里简单写下用户名和发送内容的样式*/ .user { color: #00a1f4; cursor: pointer; } .content { display: inline-block; padding: 6px 10px; background-color: #00a1f4; border-radius: 8px; color: #fff; } </style> <div class="container" style="margin-top: 30px;"> <div class="row"> <div class="col-xs-12"> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="text-center">聊天界面</h4> </div> <div class="panel-body"> <ul id="list" class="list-group" style="height: 300px;overflow: auto;"></ul> </div> <div class="panel-footer"> <div class="row"> <div class="col-xs-10"> <input type="text" class="form-control" id="input"> </div> <div class="col-xs-1"> <button class="btn btn-info" id="sendBtn">发送</button> </div> </div> </div> </div> </div> </div> </div>
弄完后,差不多就是这样子:
三、服务端代码(server.js)
const express = require('express'); const app = express(); // 设置静态文件夹,会默认找当前目录下的index.html文件当做访问的页面 app.use(express.static(__dirname)); // WebSocket是依赖HTTP协议进行握手的 const server = require('http').createServer(app); const io = require('socket.io')(server); //客户端 1 的访问地址 app.get("/client1",function (req,res,next) { res.sendFile(__dirname+"/views/client1.html"); }); //客户端 2 的访问地址 app.get("/client2",function (req,res,next) { res.sendFile(__dirname+"/views/client2.html"); }); // 监听与客户端的连接事件 io.on('connection', socket => { console.log('服务端连接成功'); // 服务端发送message事件,把msg消息再发送给客户端 socket.on("sendMsg",function (data) { // data 为客户端发送的消息 console.log(data) // 使用 emit 发送消息 io.emit("message",data); }) }); //监听3000端口 server.listen(3000);
用vscode打开终端,启动服务
四、客户端代码(client1.html)
引入socket.io
<!-- 引入socket.io.js --> <script src="/socket.io/socket.io.js"></script>
let socket = io.connect(); let list = document.getElementById('list'), input = document.getElementById('input'), sendBtn = document.getElementById('sendBtn'); // 发送消息的方法 function send() { let value = input.value; if (value) { // 发送消息给服务器 let data={ user:"张学友", id:1, msg:input.value, createAt: new Date().toLocaleString() }; socket.emit('sendMsg', data); input.value = ''; } else { alert('输入的内容不能为空!'); } } // 点击按钮发送消息 sendBtn.onclick = send; // 键盘回车发消息 function enterSend(e) { if(e.keyCode == 13) send() } input.onkeydown = function(event) { enterSend(event) } // 监听事件,用来接收其他客户端推送的消息 socket.on("message",function (data) { let li = document.createElement('li'); li.className = 'list-group-item'; li.innerHTML = `<p style="color: #ccc;"><span class="user" style="color:${data.color}">${data.user} </span>${data.createAt}</p> <p class="content" style="background-color: ${data.color}">${data.msg}</p>`; list.appendChild(li); // 将聊天区域的滚动条设置到最新内容的位置 list.scrollTop = list.scrollHeight; });
先发个消息试试看,服务端能接收到消息,页面也显示出来了
复制一份到client2中,改下用户名,互发消息试试看
这样就实现了用socket.io做一个简单的聊天功能。