express框架實(shí)現(xiàn)基于Websocket建立的簡(jiǎn)易聊天室

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:33:00

express框架實(shí)現(xiàn)基于Websocket建立的簡(jiǎn)易聊天室

express框架實(shí)現(xiàn)基于Websocket建立的簡(jiǎn)易聊天室:最近想寫(xiě)點(diǎn)有意思的，所以整了個(gè)這個(gè)簡(jiǎn)單的不太美觀的小玩意首先你得確認(rèn)你的電腦裝了node，然后就可以按照步驟搞事情了~~ 1.建立一個(gè)文件夾 2.清空當(dāng)前文件夾地址欄，在文件夾地址欄中輸入cmd.exe 3.我們需要下載點(diǎn)小東西，需要在命令行輸入 npm

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀express框架實(shí)現(xiàn)基于Websocket建立的簡(jiǎn)易聊天室:最近想寫(xiě)點(diǎn)有意思的，所以整了個(gè)這個(gè)簡(jiǎn)單的不太美觀的小玩意首先你得確認(rèn)你的電腦裝了node，然后就可以按照步驟搞事情了~~ 1.建立一個(gè)文件夾 2.清空當(dāng)前文件夾地址欄，在文件夾地址欄中輸入cmd.exe 3.我們需要下載點(diǎn)小東西，需要在命令行輸入 npm

最近想寫(xiě)點(diǎn)有意思的，所以整了個(gè)這個(gè)簡(jiǎn)單的不太美觀的小玩意

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

1.建立一個(gè)文件夾

2.清空當(dāng)前文件夾地址欄，在文件夾地址欄中輸入cmd.exe

3.我們需要下載點(diǎn)小東西，需要在命令行輸入

npm install express 回車(chē) 等待一會(huì)

npm install express-session 回車(chē) 等待一會(huì)

npm install ejs 回車(chē) 等待一會(huì)

npm install socket.io 回車(chē) 等待一會(huì) 叮~~~ 搞定！！！

4.安裝完成后，在你建的文件夾下就會(huì)有一個(gè) node_modules文件夾，接下來(lái)我們還需要建立倆文件夾，一個(gè)文件夾(public)存放靜態(tài)資源，并且添加jquery文件，一個(gè)文件夾(views)存放靜態(tài)模板e(cuò)js文件。

5.接下來(lái)我們就需要建立一個(gè)入口文件（app.js），在你建立的文件夾下。

6.app.js中必須寫(xiě)的

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)聽(tīng)端口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="https://www.gxlcms.com/socket.io/socket.io.js"></script>
<script src="https://www.gxlcms.com/jquery-1.12.4.js"></script>

如果你本地沒(méi)有的話，你可以這樣玩~~

咱可以引用在線的嘛(親測(cè)好使)

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

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

判斷登陸的三個(gè)條件

1-不能為空

2-不能重名

3-注冊(cè)并且跳轉(zhuǎn)chat頁(yè)面

9.咱登陸了，要聊天，咱得告訴別人咱叫啥啊！！！所以這里需要處理session了，并且在chat頁(yè)面顯示出來(lái)嘛

10.所以咱得開(kāi)始建立websocket通訊了

client

<script src="https://www.gxlcms.com/socket.io/socket.io.js"></script>
<script src="https://www.gxlcms.com/jquery-1.12.4.js"></script>

<script>
 var socket=io();

 socke.emit('事件名'，'數(shù)據(jù)')； 數(shù)據(jù)可以是對(duì)象（登陸者和內(nèi)容）
</script>

server

 io.on('connection',function(socket){
 socket.on('事件名',function(data){

 io.emit('新的事件名',data);
 });
});

client

socket.on('新的事件名',function(msg){
 dom操作 把msg數(shù)據(jù)渲染給我們的dom結(jié)構(gòu)
})

基本的思路和步驟就是這些

現(xiàn)在一切工作準(zhǔn)備就緒，開(kāi)始碼代碼

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)服務(wù)
app.use(express.static('./public'));

var alluser=[];
//中間件
//顯示首頁(yè)
app.get('/',function(req,res,next){
 res.render('index');
});

//確認(rèn)登錄，檢查此人是否有用戶名 昵稱(chēng)不能重復(fù)
app.get('/check',function(req,res,next){
 var yonghuming=req.query.yonghuming;

 if(!yonghuming){
 res.send('必須填寫(xiě)用戶名');
 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)聽(tīng)端口
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">
 輸入昵稱(chēng):
 <input type="text" id="yonghuming" name="yonghuming">
 <input type="submit" value="進(jìn)入聊天室">
 </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="https://www.gxlcms.com/socket.io/socket.io.js"></script>
 <script src="https://www.gxlcms.com/jquery-1.12.4.min.js"></script>
 <script>
 var socket=io();
 $('#neirong').keydown(function(e){
 if(e.keyCode==13){
 //回車(chē)發(fā)送消息
 socket.emit('liaotian',{
 'neirong':$('#neirong').val(),
 'ren':$('#yonghu').html(),
 });
 $(this).val('');
 }


 });

 /*
 $("#fayan").click(function(){
 //點(diǎn)擊發(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>