边学边理解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，想深入理解者，自行百度，我只能帮你到这里！