微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

express框架实现基于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)存放静态资源,并且添加jquery文件一个文件夹(views)存放静态模板ejs文件

5.接下来我们就需要建立一个入口文件(app.js),在你建立的文件夹下 。

6.app.js中必须写的

//加载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模板、处理静态资源管理器

rush:js;"> app.get app.post app.set("view engine","ejs"); app.use(express.static('./public'));

(2)建立俩文件,index.ejs、chat.ejs,在chat.ejs下我们需要引入

rush:js;">

如果你本地没有的话,你可以这样玩~~

咱可以引用在线的嘛(亲测好使)

rush:js;">

server

rush:js;"> io.on('connection',function(socket){ socket.on('事件名',function(data){
io.emit('新的事件名',data);

});
});

client

rush:js;"> socket.on('新的事件名',function(msg){ dom操作 把msg数据渲染给我们的dom结构 })

基本的思路和步骤就是这些

现在一切工作准备就绪,开始码代码

app.js

rush: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',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',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文件夹下)

rush:xhtml;"> <Meta charset="UTF-8"> Document

chat.ejs

rush:xhtml;"> <Meta charset="UTF-8"/> Document

Edison聊天室

<script src="/socket.io/socket.io.js">
<script src="/jquery-1.12.4.min.js">

dison进入聊天室

dison与chan聊天

在码代码过程中,不断的踩坑,填坑,第一次整这玩意,很多地方不熟悉,难免有些错误,毕竟学习过程嘛,有点磕碜,如果你们也写了好使了,咱可以共同进步一起美化,完善更多的功能,忘各位old铁见谅~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐