您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
怎么在express框架中利用Websocket建立一个聊天室？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
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>
<h2>Edison聊天室<span id="yonghu"> 欢迎：<%=yonghuming %></span></h2>
<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建立一个聊天室问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。