express框架實現基于Websocket建立的簡易聊天室

更新時間：2017年08月10日 11:36:43 作者：edisonchan

本篇文章主要介紹了express框架實現基于Websocket建立的簡易聊天室，具有一定的參考價值，有興趣的可以了解一下

最近想寫點有意思的，所以整了個這個簡單的不太美觀的小玩意

首先你得確認你的電腦裝了node，然后就可以按照步驟搞事情了~~

1.建立一個文件夾

2.清空當前文件夾地址欄，在文件夾地址欄中輸入cmd.exe

3.我們需要下載點小東西，需要在命令行輸入

npm install express 回車等待一會
npm install express-session 回車等待一會
npm install ejs 回車等待一會
npm install socket.io 回車等待一會叮~~~ 搞定?。。?/li>

4.安裝完成后，在你建的文件夾下就會有一個 node_modules文件夾，接下來我們還需要建立倆文件夾，一個文件夾(public)存放靜態(tài)資源，并且添加jquery文件，一個文件夾(views)存放靜態(tài)模板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);
//監(jiān)聽端口3000
http.listen(3000);

7.(1)加載路由、處理路由、配置ejs模板、處理靜態(tài)資源管理器

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");
//靜態(tài)服務
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);
  });
})

//監(jiān)聽端口
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="發(fā)言"/>
  </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){
            //回車發(fā)送消息
        socket.emit('liaotian',{
          'neirong':$('#neirong').val(),
          'ren':$('#yonghu').html(),
        });
        $(this).val('');
      }


    });

    /*
    $("#fayan").click(function(){
       //點擊發(fā)言按鈕發(fā)送消息
      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>

聊天室登陸界面

edison進入聊天室

edison與chan聊天

在碼代碼過程中，不斷的踩坑，填坑，第一次整這玩意，很多地方不熟悉，難免有些錯誤，畢竟學習過程嘛，有點磕磣，如果你們也寫了好使了，咱可以共同進步一起美化，完善更多的功能，忘各位old鐵見諒~~~

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Node.js Sequelize如何實現數據庫的讀寫分離
Sequelize是一個易于使用，支持多SQL方言(dialect)的對象-關系映射框架（ORM），這個庫完全采用JavaScript開發(fā)并且能夠用在Node.JS環(huán)境中。它當前支持MySQL, MariaDB, SQLite 和 PostgreSQL 數據庫。在Node.js中，使用 Sequelize操作數據庫時，同樣支持讀寫分離。
2016-10-10
Node中node_modules文件夾及package.json文件的作用說明
這篇文章主要介紹了Node中node_modules文件夾及package.json文件的作用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
node實現封裝一個圖片拼接插件
這篇文章主要介紹了node實現封裝一個圖片拼接插件，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下
2022-08-08
node.js調用C++函數的方法示例
這篇文章主要介紹了node.js調用C++函數的方法示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
nodejs個人博客開發(fā)第一步準備工作
這篇文章主要為大家詳細介紹了nodejs個人博客開發(fā)的準備工作，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
linux服務器快速卸載安裝node環(huán)境(簡單上手)
這篇文章主要介紹了linux服務器快速卸載安裝node環(huán)境(簡單上手)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
Node.js使用MySQL連接池的方法實例
這篇文章主要介紹了Node.js使用MySQL連接池的方法,結合具體實例形式分析了nodejs操作mysql連接池的相關模塊安裝、連接、查詢等使用技巧,需要的朋友可以參考下
2018-02-02
詳解基于electron制作一個node壓縮圖片的桌面應用
這篇文章主要介紹了詳解基于electron制作一個node壓縮圖片的桌面應用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
使用Fetch API執(zhí)行GraphQL查詢和變體問題
這篇文章主要介紹了使用Fetch API執(zhí)行GraphQL查詢和變體問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04
基于node.js實現微信支付退款功能
在微信開發(fā)中有有付款就會有退款，這樣的功能非常常見，這篇文章主要介紹了node.js實現微信支付退款功能,需要的朋友可以參考下
2017-12-12