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 相关文章推荐
javascript修改表格背景色实例代码分享
Dec 10 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
vue component组件使用方法详解
Jul 14 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
vue项目中微信登录的实现操作
Sep 08 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
React如何创建组件
Jun 27 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
PHP 开源AJAX框架14种
2009/08/24 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
js arguments,jcallee caller用法总结
2013/11/30 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
pycharm安装及如何导入numpy
2020/04/03 Python
Python如何将函数值赋给变量
2020/04/28 Python
大学生党课思想汇报
2013/12/29 职场文书
早会主持词
2014/03/17 职场文书
中学生演讲稿
2014/04/26 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
nginx rewrite功能使用场景分析
2022/05/30 Servers
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技