最近想写点有意思的,所以整了个这个简单的不太美观的小玩意
首先你得确认你的电脑装了node,然后就可以按照步骤 搞事情了~~
1.建立一个文件夹
2.清空当前文件夹地址栏,在文件夹地址栏中输入cmd.exe
3.我们需要下载点小东西 ,需要在命令行输入
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> <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="发言"/> </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>
聊天室登陆界面
edison进入聊天室
edison与chan聊天
在码代码过程中,不断的踩坑,填坑,第一次整这玩意,很多地方不熟悉,难免有些错误,毕竟学习过程嘛,有点磕碜,如果你们也写了好使了,咱可以共同进步一起美化,完善更多的功能,忘各位old铁见谅~~~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。