How to build a multi-person chat room in nodejs+express environment

//package.json { "name": "chatroom", "version": "1.0.0", "description": "A simple chatroom", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/ddvdd008/chatroom.git" }, "keywords": [ "chatroom", "nodejs", "express" ], "author": "ddvdd", "license": "ISC", "bugs": { "url": "https://github.com/ddvdd008/chatroom/issues" }, "homepage": "https://github.com/ddvdd008/chatroom#readme" }

npm install express --save npm install socket.io --save

"dependencies": { "express": "^4.16.2", "socket.io": "^2.0.4" }

/** * Created by ddvdd on 2018-02-07. */ const express = require('express'); const app = express(); // 创建express实例，赋值给app。 const fs = require('fs'); // 这个是node的文件读取模块，用于读取文件 const path = require('path'); // 这是node的路径处理模块，可以格式化路径 app.listen(3000,()=>{ console.log("server running at 127.0.0.1:3000"); // 代表监听3000端口，然后执行回调函数在控制台输出。 }); /** * app.get(): express中的一个中间件，用于匹配get请求，说的简单点就是node处理请求的路由，对于不同url请求，让对应的不同app.get()去处理 * '/': 它匹配get请求的根路由 '/'也就是 127.0.0.1:3000/就匹配到它了 * req带表浏览器的请求对象，res代表服务器的返回对象 */ app.get('/',(req,res)=>{ res.redirect('/chat.html'); // express的重定向函数。如果浏览器请求了根路由'/',浏览器就给他重定向到 '127.0.0.1:3000/chat.html'路由中 }); /** * 这里匹配到的是/chat.html就是上面重定向到的路径。 */ app.get('/chat.html',(req,res)=>{ fs.readFile(path.join(__dirname,'./public/chat.html'),function(err,data){ //读取文件，readFile里传入的是文件路径和回调函数，这里用path.join()格式化了路径。 if(err){ console.error("读取chat.html发生错误",err); //错误处理 res.send('4 0 4'); //如果发生错误，向浏览器返回404 } else { res.end(data); //这里的data就是回调函数的参数，在readFile内部已经将读取的数据传递给了回调函数的data变量。 } //我们将data传到浏览器，就是把html文件传给浏览器 }) });

app.use('/',express.static(path.join(__dirname,'./public'))); //一句话就搞定。

app.get('/chat.html',(req,res)=>{ fs.readFile(path.join(__dirname,'./public/chat.html'),function(err,data){ if(err){ console.error("读取chat.html发生错误",err); res.send('4 0 4'); } else { res.end(data); } }) });

/** * Created by ddvdd on 2018-02-07. */ const express = require('express'); const app = express(); // 创建express实例，赋值给app。 const server = require('http').Server(app); const io = require('socket.io')(server); //将socket的监听加到app设置的模块里。这两句理解不了的可以去socket.io官网去看 const path = require('path'); // 这是node的路径处理模块，可以格式化路径 server.listen(3000,()=>{ console.log("server running at 127.0.0.1:3000"); // 代表监听3000端口，然后执行回调函数在控制台输出。 }); ... ... app.use('/',express.static(path.join(__dirname,'./public'))); //一句话就搞定。 /*socket*/ io.on('connection',(socket)=>{ //监听客户端的连接事件 });

     
  这是我们的聊天室  

//chat.html       
  
 
欢迎来到ddvdd聊天室
 
 
 用户名：  
 登陆 
 
  

  //socket.io官网要求这么引入 

//main.js /** * Created by ddvdd on 2018-02-08. */ $(function(){ const url = 'http://127.0.0.1:3000'; let _username = ''; let _$inputname = $('#name'); let _$loginButton = $('#loginbutton'); let socket = io.connect(url); //设置用户名，当用户登录的时候触发 let setUsername = () => { _username = _$inputname.val().trim(); //得到输入框中用户输入的用户名 //判断用户名是否存在 if(_username) { socket.emit('login',{username: _username}); //如果用户名存在，就代表可以登录了，我们就触发登录事件，就相当于告诉服务器我们要登录了 } else{ alert('请输入用户名！'); } }; /*前端事件*/ _$loginButton.on('click',function (event) { //监听按钮的点击事件，如果点击，就说明用户要登录，就执行setUsername函数 setUsername(); }); /*socket.io部分逻辑*/ socket.on('loginResult',(data)=>{ /** * 如果服务器返回的用户名和刚刚发送的相同的话，就登录 * 否则说明有地方出问题了，拒绝登录 */ if(data.code === 0) { // 登陆成功，切换至聊天室页面 } else if(data.code ===1){ alert('用户已登录！'); } else{ alert('登录失败！'); } }) }); //app.js /** * Created by ddvdd on 2018-02-07. */ const express = require('express'); const app = express(); // 创建express实例，赋值给app。 const server = require('http').Server(app); const io = require('socket.io')(server); //将socket的监听加到app设置的模块里。这两句理解不了的可以去socket.io官网去看 const path = require('path'); // 这是node的路径处理模块，可以格式化路径 const users = []; //用来保存所有的用户信息 let usersNum = 0; //统计在线登录人数 server.listen(3000,()=>{ console.log("server running at 127.0.0.1:3000"); // 代表监听3000端口，然后执行回调函数在控制台输出。 }); /** * app.get(): express中的一个中间件，用于匹配get请求，说的简单点就是node处理请求的路由，对于不同url请求，让对应的不同app.get()去处理 * '/': 它匹配get请求的根路由 '/'也就是 127.0.0.1:3000/就匹配到它了 * req带表浏览器的请求对象，res代表服务器的返回对象 */ app.get('/',(req,res)=>{ res.redirect('/static/chat.html'); // express的重定向函数。如果浏览器请求了根路由'/',浏览器就给他重定向到 '127.0.0.1:3000/chat.html'路由中 }); /** * __dirname表示当前文件所在的绝对路径，所以我们使用path.join将app.js的绝对路径和public加起来就得到了public的绝对路径。 * 用path.join是为了避免出现 ././public 这种奇怪的路径 * express.static就帮我们托管了public文件夹中的静态资源。 * 只要有 127.0.0.1：3000/XXX/AAA 的路径都会去public文件夹下找XXX文件夹下的AAA文件然后发送给浏览器。 */ app.use('/static',express.static(path.join(__dirname,'./public'))); //一句话就搞定。 /*socket*/ io.on('connection',(socket)=>{ //监听客户端的连接事件 socket.on('login',(data)=>{ if(checkUserName(data)){ socket.emit('loginResult',{code:1}); //code=1 用户已登录 } else{ //将该用户的信息存进数组中 users.push({ username: data.username, message: [] }); socket.emit('loginResult',{code:0}); //code=0 用户登录成功 usersNum = users.length; console.log(`用户${data.username}登录成功，进入ddvdd聊天室，当前在线登录人数：${usersNum}`); } }); //断开连接后做的事情 socket.on('disconnect',()=>{ //注意，该事件不需要自定义触发器，系统会自动调用 usersNum = users.length; console.log(`当前在线登录人数：${usersNum}`); }); }); //校验用户是否已经登录 const checkUserName = (data) => { let isExist = false; users.map((user) => { if(user.username === data.username){ isExist = true; } }); return isExist; }

         
  
 
 
登录
 
 用户名：  
 登录 
 
 
  
 
  
 
 
  

//显示聊天室界面 let showChatRoom = () => { /** * 1.隐藏登录框，取消它绑定的事件 * 2.显示聊天界面 */ $('#loginbox').hide('slow'); _$loginButton.off('click'); /** * 显示聊天界面，并显示一行文字，欢迎用户 */ $(`
欢迎${_username}来到ddvdd聊天室
`).insertBefore($("#content")); $("#chatbox").show('slow'); }

//main.js //发送消息 let sendMessage = function () { /** * 得到输入框的聊天信息，如果不为空，就触发sendMessage * 将信息和用户名发送过去 */ let _message = _$chattextarea.val(); if(_message) { socket.emit('sendMessage',{username: _username, message: _message}); } else{ alert('请输入发送消息！'); } }; ... /*聊天事件*/ _$chattextarea.on('keyup',function (event) { if(event.keyCode === 13) { sendMessage(); _$chattextarea.val(''); } });

//app.js /** * 监听sendMessage,我们得到客户端传过来的data里的message，并存起来。 */ socket.on('sendMessage',(data)=>{ for(let _user of users) { if(_user.username === data.username) { _user.message.push(data.message); //信息存储之后触发receiveMessage将信息发给所有浏览器-广播事件 io.emit('receiveMessage',data); break; } } });

//main.js socket.on('receiveMessage',(data)=>{ /** * * 监听服务器广播的消息 */ showMessage(data); }) //显示消息 let showMessage = function (data) { //先判断这个消息是不是自己发出的，然后再以不同的样式显示 if(data.username === _username){ $("#content").append(`
${data.message} :${data.username}
`); }else { $("#content").append(`
${data.username}: ${data.message}
`); } };