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 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
vue之debounce属性被移除及处理详解
Nov 13 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 空格,换行,跳格使用说明
2009/12/18 PHP
php中session退出登陆问题
2014/02/27 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
js表头排序实现方法
2015/01/16 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
理解javascript异步编程
2016/01/27 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
JSON 数据格式详解
2017/09/13 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python使用marshal模块序列化实例
2014/09/25 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
初中英语教师个人工作总结
2015/02/09 职场文书
高三数学教学反思
2016/02/18 职场文书
导游词之峨眉山
2019/12/16 职场文书