express框架实现基于Websocket建立的简易聊天室

2019-11-19 15:50:48

字体：大中小

来源：转载

供稿：网友

最近想写点有意思的，所以整了个这个简单的不太美观的小玩意

首先你得确认你的电脑装了node，然后就可以按照步骤搞事情了~~

1.建立一个文件夹

2.清空当前文件夹地址栏，在文件夹地址栏中输入cmd.exe

3.我们需要下载点小东西，需要在命令行输入

npm install express 回车等待一会
npm install express-session 回车等待一会
npm install ejs 回车等待一会
npm install socket.io 回车等待一会叮~~~ 搞定！！！

4.安装完成后，在你建的文件夹下就会有一个 node_modules文件夹，接下来我们还需要建立俩文件夹，一个文件夹(public)存放静态资源，并且添加jquery文件，一个文件夹(views)存放静态模板ejs文件。

5.接下来我们就需要建立一个入口文件（app.js），在你建立的文件夹下。

6.app.js中必须写的

var express=require('express');var app=express();//加载express web servervar http=require('http').Server(app);//加载websocket server-->http://localhost:3000/socket.io/socket.io.jsvar io=require('socket.io')(http);//监听端口3000http.listen(3000);

7.(1)加载路由、处理路由、配置ejs模板、处理静态资源管理器

app.get app.postapp.set("view engine","ejs");app.use(express.static('./public'));

(2)建立俩文件，index.ejs、chat.ejs，在chat.ejs下我们需要引入

<script src="/socket.io/socket.io.js"></script><script src="/jquery-1.12.4.js"></script>

如果你本地没有的话，你可以这样玩~~

咱可以引用在线的嘛(亲测好使)

<script src="http://code.jquery.com/jquery-latest.js"></script>

8.app.get 路由 action=‘check'

判断登陆的三个条件

1-不能为空

2-不能重名

3-注册并且跳转chat页面

9.咱登陆了，要聊天，咱得告诉别人咱叫啥啊！！！所以这里需要处理session了，并且在chat页面显示出来嘛

10.所以咱得开始建立websocket通讯了

client

<script src="/socket.io/socket.io.js"></script><script src="/jquery-1.12.4.js"></script><script>   var socket=io();   socke.emit('事件名'，'数据')； 数据可以是对象（登陆者和内容）</script>

server

 io.on('connection',function(socket){  socket.on('事件名',function(data){    io.emit('新的事件名',data);  });});

client

socket.on('新的事件名',function(msg){     dom操作  把msg数据渲染给我们的dom结构})

基本的思路和步骤就是这些

现在一切工作准备就绪，开始码代码

app.js

var express=require('express');var app=express();var http=require('http').Server(app);var io=require('socket.io')(http);var session=require('express-session');app.use(session({ secret: 'keyboard cat', resave: false, saveUninitialized: true, //cookie: { secure: true }}));//模板引擎app.set("view engine","ejs");//静态服务app.use(express.static('./public'));var alluser=[];//中间件//显示首页app.get('/',function(req,res,next){  res.render('index');});//确认登录，检查此人是否有用户名 昵称不能重复app.get('/check',function(req,res,next){  var yonghuming=req.query.yonghuming;  if(!yonghuming){    res.send('必须填写用户名');    return;  }  if(alluser.indexOf(yonghuming) != -1){    res.send('用户名重名');    return;  }  alluser.push(yonghuming);  console.log(alluser);  req.session.yonghuming=yonghuming;  res.redirect("/chat");});//聊天室app.get('/chat',function(req,res,next){  //console.log(req.session.yonghuming);  //console.log(123);  if(!req.session.yonghuming){    res.redirect("/");    return;  }  res.render('chat',{    'yonghuming':req.session.yonghuming  });});io.on('connection',function(socket){  socket.on('liaotian',function(msg){    console.log(msg);    //io.emit('liaotian',msg);    //console.log(io);    io.emit('liaotian',msg);  });})//监听端口http.listen(3000);console.log('server start port 3000');

index.ejs(放views文件夹下)

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    div{      width:700px;      height:30px;      padding:40px;      border:1px solid #000;      margin:0 auto;    }    #yonghuming{      font-size:30px;    }  </style></head><body>  <div>    <form action="/check" method="get">    输入昵称:    <input type="text" id="yonghuming" name="yonghuming">    <input type="submit" value="进入聊天室">    </form>  </div></body></html>

chat.ejs

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8"/>  <title>Document</title>  <style>    .caozuo{      position:fixed;      bottom:0;      left:0;      height:100px;      background-color:#eee;      width:100%;    }    .caozuo input{      font-size:30px;    }    .caozuo input[type=text]{      width:100%;    }  </style></head><body>  <h1>Edison聊天室<span id="yonghu"> 欢迎：<%=yonghuming %></span></h1>  <div>    <ul class="liebiao"></ul>  </div>  <div class="caozuo">  <input type="text" id="neirong"/>  <input type="button" id="fayan" value="发言"/>  </div>  <script src="/socket.io/socket.io.js"></script>  <script src="/jquery-1.12.4.min.js"></script>  <script>    var socket=io();    $('#neirong').keydown(function(e){      if(e.keyCode==13){            //回车发送消息        socket.emit('liaotian',{          'neirong':$('#neirong').val(),          'ren':$('#yonghu').html(),        });        $(this).val('');      }    });    /*    $("#fayan").click(function(){       //点击发言按钮发送消息      socket.emit('liaotian',{        'neirong':$('#neirong').val(),        'ren':$('#yonghu').html(),      });    });*/    socket.on('liaotian',function(msg){      $(".liebiao").prepend("<li><b>"+msg.ren+": </b>"+msg.neirong+"</li>");    });  </script></body></html>