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


Posted in Javascript onAugust 10, 2017

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

首先你得确认你的电脑装了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 server
var http=require('http').Server(app);
//加载websocket server-->http://localhost:3000/socket.io/socket.io.js
var io=require('socket.io')(http);
//监听端口3000
http.listen(3000);

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

app.get app.post
app.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>

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

聊天室登陆界面

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

edison进入聊天室

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

edison与chan聊天

在码代码过程中,不断的踩坑,填坑,第一次整这玩意,很多地方不熟悉,难免有些错误,毕竟学习过程嘛,有点磕碜,如果你们也写了好使了,咱可以共同进步一起美化,完善更多的功能,忘各位old铁见谅~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
JS计算距当前时间的时间差实例
Dec 29 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
bootstrap table服务端实现分页效果
Aug 10 #Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 #Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 #Javascript
js实现省市级联效果分享
Aug 10 #Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 #Javascript
jquery对table做排序操作的实例演示
Aug 10 #jQuery
基于JavaScript实现飘落星星特效
Aug 10 #Javascript
You might like
5.PHP的其他功能
2006/10/09 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
基于jQuery的动态表格插件
2011/03/28 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
JS常用算法实现代码
2016/11/14 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
详解Python中expandtabs()方法的使用
2015/05/18 Python
Python延时操作实现方法示例
2018/08/14 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
python logging模块的使用总结
2019/07/09 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
Java的基础面试题附答案
2016/01/10 面试题
大学本科生的个人自我评价
2013/12/09 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
求职面试个人自我评价
2014/02/28 职场文书
冬季施工防火方案
2014/05/17 职场文书
五四青年节演讲稿
2014/05/26 职场文书
2015高考寄语集锦
2015/02/27 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书