express框架實現(xiàn)基于Websocket建立的簡易聊天室
更新時間：2017年08月10日 11:36:43 作者：edisonchan
本篇文章主要介紹了express框架實現(xiàn)基于Websocket建立的簡易聊天室，具有一定的參考價值，有興趣的可以了解一下
最近想寫點有意思的，所以整了個這個簡單的不太美觀的小玩意
首先你得確認你的電腦裝了node，然后就可以按照步驟 搞事情了~~
1.建立一個文件夾
2.清空當前文件夾地址欄，在文件夾地址欄中輸入cmd.exe
3.我們需要下載點小東西 ，需要在命令行輸入
- npm install express 回車 等待一會
- npm install express-session 回車 等待一會
- npm install ejs 回車 等待一會
- npm install socket.io 回車 等待一會 叮~~~ 搞定?。?！
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('事件名'，'數(shù)據(jù)')； 數(shù)據(jù)可以是對象（登陸者和內(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結構
})
基本的思路和步驟就是這些
現(xiàn)在一切工作準備就緒，開始碼代碼
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鐵見諒~~~
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
使用異步編程可以提高Node.js應用程序的性能，而async和await是Node.js中實現(xiàn)異步編程的一種簡單且易于使用的方式，可以幫助開發(fā)者避免回調(diào)地獄和處理異步操作時的錯誤2023-05-05
這篇文章主要介紹了推薦一個基于Node.js的表單驗證庫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了node.js中的console.log方法使用說明,本文介紹了console.log的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
Node.js創(chuàng)建子進程的幾種實現(xiàn)方式
這篇文章主要介紹了Node.js創(chuàng)建子進程的幾種實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了NODE.JS加密模塊CRYPTO常用方法介紹,需要的朋友可以參考下2014-06-06
這篇文章主要為大家介紹了pm2工具在Node.js開發(fā)部署中的重要作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
這篇文章主要介紹了淺談Node Inspector 代理實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
一次NodeJS內(nèi)存泄漏排查的實戰(zhàn)記錄
這篇文章主要給大家介紹了一次NodeJS內(nèi)存泄漏排查的實戰(zhàn)記錄,文中給出了詳細的排查過程以及內(nèi)存泄漏的解決方法,大家可以學習一下以備不時之需,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Node.js定時任務之node-schedule使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關于Node.js中異步生成器與異步迭代的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01