-
- 访问 “ / ” 路由时候，渲染index.ejs页面
var express = require('express');
var app = express();
/*设置使用静态页面*/
app.set('view engine','ejs');
/*渲染静态页面*/
app.get('/',function (req, res) {
res.render('index.ejs');
});
/*如果在express中使用对应的socket，不能使用app监听，要用http监听*/
app.listen(3000);
-
- 当点击进入聊天室后（提交表单的时候，提交到'/check'路由上），即访问'/check'路由时，先获取用户名，然后判断用户名是否有数值；若有数值，则判断用户名是否重复；若不重复，则将该用户名保存在数组中，并将用户名保存在session中。然后跳转到chat路由上。
-
路由的跳转使用redirect方法
redirect:第一个参数表示对应的状态码，只有301和302，其余都不行
第二个参数表示我们跳转到的界面的路由
一般情况我们不写状态码
res.redirect('/chat');
/*判断用户名是否重复
* 解决的办法：
* 设置一个数组，用来记录所有输入的用户名，然后获取到当前的用户名和对应的数组中的数组进行比较，如果数组中没有这个用户名，表示不重复，就添加到数组中。要是重复，就回到首页*/
/*设置一个数组，用来记录对应的用户名
* 设置数组不能设置到路由的回调中，需要设置在外面*/
var names = [];
/*
首页、验证信息、登录界面
设置处理check路由，用来处理对应的用户昵称的业务逻辑
分析用户名的逻辑
保证对应的哟用户名有数值
当有数值之后，判断用户名是否重复
当都符合后，就进入登录页面，不符合就回到首页
* */
app.get('/check',function (req, res) {
/*获取用户名*/
var userName = req.query.userName;
/*判断用户名是否存在*/
if (!userName){
//用户名没有数值，即不存在
res.send('用户名不存在，请输入用户名');
return;
}else {
//用户名存在，判断用户名是否重复
/*检测用户名是否存在数组中
* 解决方法：使用数组中的indexOf方法
* indexOf：表示对应的元素是否存在数组中，如果返回-1，则表示不存在，即不重复。不等于-1则表示存在，即重复*/
if (names.indexOf(userName) == -1){
//用户名不存在，即不重复。
/*不重复时，则先将对应的用户名保存在数组中，然后跳转到聊天页面。*/
names.push(userName);
/*我们需要在其他地方使用用户名，因此我们需要使用session保存用户名*/
req.session.userName = userName;
/*当符合后，我们跳转到聊天页面*/
/*redirect:第一个参数表示对应的状态码，只有301和302，其余都不行
* 第二个参数表示我们跳转到的界面的路由
* 一般情况我们不写状态码*/
res.redirect('/chat');
}else{
/*重复*/
res.send('用户名已经存在，请重新输入');
return;
}
}
});
-
- 当访问 ‘/chat’ 路由的时候，客户端获取input中的数据，然后将用户输入的数据与用户名一起作为msg发送给服务端，服务端接受到客户端信息，再将其发送给对应的客户端，显示在界面上。
- 这里需要用到websocket，因此需要导包
var session = require('express-session');
/*设置使用session*/
app.use(session({
secret: 'keyboard cat',//相当于是密文
resave: false,//是否重新设置cookie
saveUninitialized: true,//表示是否每次session都需要重新设置
cookie: { maxAge: 90000 }//session依赖的cookie
}));
- 在express中websocket是固定的步骤
*/
/*第一种写法*/
/* 0. 导包*/
// var io = require('socket.io');
/* 1. 使用app创建对应的http服务端*/
// var http = require('http').Server(app);
/* 2. 使用http服务端创建对应的socket*/
// var socket = io(http);
/*第二种写法*/
var http = require('http').Server(app);
var socket = require('socket.io')(http);
- 在ejs中存在其他静态资源的请求，因此需要设置使用静态资源
/*设置使用静态资源*/
app.use(express.static('./public'));
在设置路由用来聊天的页面上，我们在渲染页面前需要进行对应的用户名的验证。
判断用户名是否存在对应的session中，如果不存在，重新跳转到登录页面。如果存在，继续处理后续的业务
/*设置路由用来聊天页面*/
app.get('/chat',function (req, res) {
/*渲染页面前我们进行对应的用户名的验证
* 判断用户名是否存在对应的session中，如果不存在，重新跳转到登录页面。如果存在，继续处理后续的业务*/
if(!req.session.userName){
//用户名不存在，跳转到首页
res.redirect('/');
return;
}
//用户名存在，渲染页面
res.render('chat.ejs',{'userName':req.session.userName});
});
客户端发送数据给服务端
先点击对应的回车键的时候，我们获取对应的input中的数据，然后把对应的数据发送给服务器
在发送数据前必须先设置socket
/*0. 设置socket*/
var socket = io();
/*1. input触发对应的事件，然后发送信息*/
$('#content').on('keydown',function (e) {
/*判断点击的是否是回车键*/
if (e.keyCode == 13){
/*获取每一个用户的名字*/
var perName = $('#userName').html();
/*获取input中的内容*/
var content = $('#content').val();
/*获取数据，发送给服务器*/
socket.emit('chat',{
perName:perName,
content:content
});
/*清空表单中的数据*/
$('#content').val(" ");
}
});
- 服务器接受客户端的信息，然后再把信息发送给客户端
*处理具体聊天逻辑
* 当用户点击回车时候，把对应的input中信息获取到然后发送到服务器端，当服务器接收到信息后，
* 再把数据返回给客户端
* 分析服务器：接收到连接后，然后接收客户端发送过来的信息
* 接收到后，再返回对应的数据
* 服务器必须先接收连接，再接收信息*/
socket.on('connection',function (socket) {
socket.on('chat',function (msg) {
console.log(msg);
/*msg表示接受到的信息*/
/*再把对应的信息发送给对应的客户端*/
socket.emit('reply',msg);
console.log('发送成功');
})
});
- 客户端接收信息，添加到对应的记录上。
/*2.当接收到信息后，我们把对应的信息作为记录添加到页面中*/
/*在界面中添加对应的记录，就是在ul中添加li标签，使对应的信息跑到最前面，使用prepend
* 我们需要在li中设置用户名和对应的内容
* 而且设置用户名为加粗*/
socket.on('reply',function (msg) {
console.log('接受成功');
$('.oList').prepend(''+msg.perName+':'+msg.content+' ');
})
- 如果在express中使用对应的socket，不能使用app监听，要用http监听
http.listen(3000);