边学边理解node的高深，今天写了一个聊天室的demo，很简单，认识一下socket
node服务端代码
var express = require(‘express‘);
var app = express();//session固定写法
var session = require(‘express-session‘);
app.use(session({
secret: ‘keyboard cat‘,
resave: false,
saveUninitialized: true
}));
//引入socket固定写法
var http = require(‘http‘).Server(app);
var io = require(‘socket.io‘)(http);
//渲染页面的ejs模板设置
app.set(‘view engine‘,‘ejs‘);
app.get(‘/‘,function(req,res,next){
if(req.session.user){
res.redirect("chat")
}
res.render("index")
})
var userList = [];
app.get(‘/user‘,function (req,res,next) {
var user = req.query.username;
if(!user) {
res.render("index");
return;
}
if (userList.indexOf(user) != -1){
res.send("用户名已经被占用");
return;
}
userList.push(user);
req.session.user = user;
res.redirect(‘/chat‘);
})
app.get(‘/chat‘,function (req,res,next) {
if(!req.session.user){
res.redirect(‘/‘);
return;
}
res.render(‘chat‘,{
"user":req.session.user
})
})
io.on("connection",function(socket){
socket.on("send",function(msg){
io.emit("huida",msg)
})
})
app.use(express.static(‘./public‘));
http.listen(3000,‘192.168.0.46‘);
首页ejs模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 70px;
line-height: 70px;
border: 1px solid #ddd;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
margin: auto;
text-align: center;
background-color: #ddd;
}
input{
height: 40px;
padding: 5px;
}
#username {
width: 300px;
}
#submit {
width: 100px;
height: 54px;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<form action="/user" method="get">
<input id="username" type="text" name="username" placeholder="请输入姓名">
<input id="submit" type="submit" value="进入聊天室">
</form>
</div>
</body>
</html>
聊天室页面ejs模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.container,.chat-box {
width: 500px;
height: 500px;
border: 1px solid #ddd;
margin: 0 auto;
}
.chat-box {
overflow: auto;
}
.chat-box h3 {
height: 40px;
line-height: 40px;
background-color: #eee;
padding-left: 10px;
}
.chat-box ul {
padding: 20px;
}
li {
list-style: none;
}
.text {
width: 400px;
height: 30px;
line-height: 30px;
padding: 5px 10px;
}
#btn {
width: 70px;
height: 44px;
line-height: 44px;
text-align: center;
cursor: pointer;
}
.username{
color: #e4393c;
}
</style>
<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="container">
<div class="chat-box">
<h3>欢迎<span class="username"> <%= user %> </span>来到聊天室</h3>
<ul class="list">
</ul>
</div>
<div>
<input class="text" type="text" placeholder="输入内容">
<input id="btn" type="submit" placeholder="发送">
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var btn = document.getElementById(‘btn‘);
btn.onclick = function () {
var msg = $(‘.text‘).val();
var username = $(‘.username‘).text();
if(msg){
socket.emit("send",{
"text":msg,
"user":username
})
$(‘.text‘).val(‘‘)
}else {
alert(‘聊天内容不能为空!‘)
}
}
socket.on("huida",function (msg) {
$(‘.list‘).prepend(‘<li><b>‘+msg.user+‘ 说: </b>‘+msg.text+‘</li>‘)
})
</script>
</body>
</html>
这个小demo可以带你理解一下socket，想深入理解者，自行百度，我只能帮你到这里！
时间： 2024-08-02 16:01:31