前端部分 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin:0;padding: 0;} html,body{height:100%;} /* 聊天室 */ main{height:100%; background: green; display: none;} main .header{ height: 10%; background: #000; color: #fff; text-align: center; } main .header{display: flex;justify-content: center;align-items: center;} main .content{ height: 80%; color:#fff; } main .footer{ height: 10%; background: #fff; } main .footer{ display: flex; } main .footer input{ flex-grow: 1; } main .footer button{ flex-basis: 50px; } /* 登录界面 */ .login{padding: 30px;} .login p{line-height: 60px;} .login p input{height: 30px;} </style> </head> <body> <div class="login"> <h3>用户登录</h3> <p>用户名：<input type="text" id="user"></p> <button type="button" id="login-btn">登录</button> </div> <main> <div class="header"> <h2>同城聊天室</h2> </div> <div class="content"></div> <div class="footer"> <input type="text"> <button type="button" id="dest-btn">发送</button> </div> </main> <script src="./jquery.js"></script> <script src="./socket.io.js"></script> <script> //建立websocket连接 let ws = io(‘ws://localhost:555‘) //获取登录按钮 $("#login-btn").on("click",function(){ //获取用户名输入框的值 let user = $("#user").val(); // 把用户名发送给后端 ws.emit(‘login‘, { user }) }) //获取发送消息按钮 $("#dest-btn").on("click",function(){ //获取输入的内容 let content = $(this).siblings("input").val() // 把输入的内容发送给后端 ws.emit(‘content‘, { content}) }) ws.on("returnContent",(data) => { //渲染到内容区 $(".content").append(`<p>${data.content}</p>`) }) //登录成功的时候 ws.on(‘success‘, (data) => { alert(`欢迎${data.user}登录`) $(".login").hide(); $("main").show(); }) ws.on(‘add‘, (data) => { $(‘.content‘).append(`<p>欢迎${data.user}进入聊天室!</p>`) }) </script> </body> </html> 后台部分 //引入socket.io模块 创建服务器 const server = require("http").createServer(); let io = require("socket.io")(server); // 监听连接事件 io.on(‘connection‘, (ws) => { //定义是否为新用户的标杆 let flag = true; //定义空数组，保存用户 let arr = []; //监听用户登录 ws.on("login",(data) => { //如果是新用户 if (flag){ //将新用户添加到数组中 arr.push(data.user) // 发送登录成功的信息给浏览器 ws.emit(‘success‘,data) // 广播 io.sockets.emit(‘add‘, data); } //如果不是新用户 for(let i=0; i<arr.length; i++){ // 如果数组里面已经有这个用户名 那么就不是第一次登陆 if (arr[i] === data.user){ flag = false; break; }else{ flag = true; } } }) //监听用户发送的内容 ws.on("content",(data) => { // 把接收的内容广播 io.sockets.emit(‘returnContent‘, data) }) }) // 监听端口 server.listen(555) console.log(‘服务器启动成功, ws://localhost:555‘)
原文：https://www.cnblogs.com/rrrjc/p/11386812.html