- 这个项目的主要内容就是一个简单的聊天室
- 用到的技术：nodejs、express、scoket、ejs
- 需要引的包：express、scoket.io、 ejs、http
- 项目下载地址：https://github.com/prettyRain/chatroom
-
项目目录结构：
image.png
app.js
//express
var express = require('express');
var app = express();
//创建io公式
var server = require('http').Server(app);
var io = require('socket.io')(server);
app.set("view engine","ejs");
app.use(express.static("./public"));
//session
var session = require("express-session");
app.use(session({
secret: '12345',
name: 'testapp', //这里的name值得是cookie的name，默认cookie的name是：connect.sid
cookie: {maxAge: 800000 }, //设置maxAge是80000ms，即80s后session和相应的cookie失效过期
resave: false,
saveUninitialized: true
}));
var userarr = [];
//显示登录页面
app.get("/",function(req,res){
//判断有没有登录
if(!!req.session.username){
res.redirect("/chat");
}else{
res.render("login");
}
})
//登录
app.get("/dologin",function(req,res){
var username = req.query.username;
if(userarr.indexOf(username) != -1){
//已经被占用
res.send("-1");
}else{
req.session.login = 1;
req.session.username = username;
userarr.push(username);
res.send("1");
}
})
//聊天室
app.get("/chat",function(req,res){
if(!req.session.username){
res.render("login");
return;
}
res.render("chat",{username:req.session.username});
});
io.on('connection',function(socket){
console.log("创建了一个连接");
socket.on("shuru",function(msg){
console.log(msg);
io.emit("shuchu","<h6>"+msg.username+"</h6><p>"+msg.content+"</p>");
})
})
//监听 注意不要写错
server.listen(3000);
login.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
<style>
* {margin:0;padding:0}
body,html{
width:100%;
height:100%;
overflow:hidden;
}
div {
margin:0;
padding:0;
box-sizing:border-box;
margin:0 auto;
}
.top {
position:fixed;
top:0;
left:0;
width:100%;
text-align:center;
font-size:30px;
font-weight:400;
color: white;
background: #73accc;
}
.content {
width:100%;
padding-top:180px;
height:100%;
overflow: auto;
}
.content .login {
width:80%;
height:30%;
border:1px solid red;
padding-top:30px;
text-align:center;
}
.content input {
width:70%;
height:30px;
border-radius:8px;
border:1px solid #ccc;
outline:none;
padding-left:5px;
}
.content label {
padding:0 5px;
}
.content botton {
display:block;
padding-top:10px;
}
</style>
</head>
<body>
<div class="top">登录</div>
<div class="content">
<div class="login">
<label for="nameId">输入昵称 :</label><input type="text" name="" id="nameId"/>
<botton>提交</botton>
</div>
</div>
</body>
</html>
<script>
var botton = document.querySelector("botton");
botton.addEventListener("click",function(e){
e.preventDefault();
var username = document.querySelector("#nameId").value;
if(!!username){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var i = xmlhttp.responseText;
if(i == "-1"){
alert("昵称被占用");
}else if(i == "1"){
window.location.href = "/chat";
}
}
}
xmlhttp.open("GET","/dologin?username="+username,true)
xmlhttp.send(null);
}else{
alert("昵称不能为空");
}
})
</script>
chat.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
<style>
* {margin:0;padding:0}
body,html{
width:100%;
height:100%;
overflow:hidden;
}
div {
margin:0;
padding:0;
box-sizing:border-box;
margin:0 auto;
}
.top {
position:fixed;
top:0;
left:0;
width:100%;
text-align:center;
font-size:30px;
font-weight:400;
color: white;
background: #73accc;
}
.content {
width:100%;
padding:40px 20px;
height:100%;
overflow: auto;
}
.content div{
padding-bottom:5px;
border-bottom:1px dashed #c4ccc9;
}
.content div:last-child {
padding:0;
border-width:0;
}
.floor {
padding:5px 5px 5px 5px;
position:fixed;
bottom:0;
left:0;
width:100%;
height:30px;
background-color:#73accc;
display:flex;
flex-direction:row;
justify-content:space-between;
}
.floor span{
font-size:14px;
line-height:20px;
margin-top:0px;
text-align:center;
}
span:nth-child(1){
flex:1;
}
span:nth-child(2){
flex:5;
}
span input {
box-sizing:border-box;
margin:0;
padding-left:5px;
display:inline-block;
width:100%;
height:100%;
border-radius:10px;
border-width:0;
outline:none;
}
span:nth-child(3){
cursor:pointer;
flex:1;
}
h5 {
text-align:center;
}
</style>
</head>
<body>
<input type="hidden" name="username" value="<%=username%>" class="userClz">
<div class="top">小小聊天室</div>
<div class="content">
<div>
<h5>
<%=username%>,欢迎您
</h5>
</div>
</div>
<div class="floor"><span>消息：</span><span><input type="text" class="contentClz"/></span><span class="fasong">发送</span></div>
</body>
</html>
//关键步骤引入socket.io.js
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io();
var content = document.querySelector(".content");
var elespan = document.querySelector(".fasong");
var input = document.querySelector(".contentClz");
elespan.addEventListener("click",function(e){
console.log(33);
if(!!input.value){
socket.emit("shuru",{username:document.querySelector(".userClz").value,content:input.value});
}
})
socket.on("shuchu",function(msg){
var elediv = document.createElement("div");
elediv.innerHTML = msg;
content.appendChild(elediv);
})
</script>
网友评论