webSocket
使用nodeJs实现webSocket，比较流行使用socket.io，nodeJs比较流行一些只是io操作的方式，
比如截图修图什么的，还有聊天，推送之类的，socket.io就是实现聊天或推送之类的。
webSocket是h5出的新东西，因为长连接和短连接，还有轮询之类的太浪费资源了，所以
出现了webSocket协议，其实就是http转TCP的过程，只是它是可以实现客户端到服务器端，还有
服务器端到客户端发送请求的过程，因为一般http请求都只能客户端到服务器端，不能服务器端到
客户端，而为了服务器端也能发送内容，需要长连接或别的之类，这样会很浪费资源，所以出现webSocket，
webSocket就是两头都可以实现发送。
而node实现很简单，不过如果关系到多节点服务器或负载均衡那就比较麻烦，这个暂时不会，不过一般不上百万并发量
应该没有问题的。
node:
//公式写法 var express=require('express'); var app = express(); var server = require('http').Server(app); //一定需要这个，不是页面不能引入socket.io var io = require('socket.io')(server); var session = require('express-session'); app.use(session({ secret: 'keyboard cat', resave: false, saveUninitialized: true })); server.listen(3000); app.set("view engine","ejs"); app.use(express.static("./public")); var chartPerArr=[]; app.get('/', function (req, res) { res.render("index"); }); app.get("/login",function(req,res){ var name=req.query["name"]; if(chartPerArr.indexOf(name)!=-1){ res.end("用户名已存在!!!"); return; } req.session.usename=name; chartPerArr.push(name); res.redirect("/chart"); }); app.get('/chart', function (req, res) { if(!req.session.usename){ res.redirect("/"); return ; } var name=req.session.usename; res.render("chart",{ name:name }); }); app.get("/leave",function(req,res){ delete req.session.usename; }); /*=====================socket.io====================================*/ //保存当前用户名和socket var users={}; var userArr=[]; /*每个用户连接都会产生一个socket对象，connection的回调函数每次 有用户访问都会调用一次，会返回一个socket 所以可以保存当前socket来实现私聊 退出只要删除保存的当前的socket对象就可以了 虽然io.scokets有保存这个对象，如果不会可以自己来实现 io是面向所有连接socket对象，所以使用io对象会向所有用户发送 */ io.on('connection', function (socket) { //监听进入的用户 socket.on('join user', function (data) { if(!users[data.username]){ userArr.push(data.username); } users[data.username]={}; users[data.username]["usename"]=data.username; users[data.username]["socket"]=socket; io.emit('join user',userArr); }); socket.on("chart msg",function(data){ if(data.type==1){ sendAllMsg(data); }else if(data.type==2){ sendUserMsg(data); } }); //离开 socket.on("leave chart",function(data){ leaveHome(data); socket.broadcast.emit("leave chart",data); socket.broadcast.emit('join user',userArr); }); }); //私聊 function sendUserMsg(data){ console.log("私聊中..."); users[data.to]["socket"].emit(data.to,data); users[data.name]["socket"].emit(data.name,data); } //对所有广播消息 function sendAllMsg(data){ io.emit("charts",data); } //离开 function leaveHome(data){ if(userArr.indexOf(data.name)==-1){ return ; } delete users[data.name]; userArr.splice(1,userArr.indexOf(data.name)); }
登录页面:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>聊天室</title> <link rel="stylesheet" href="/lib/css/bootstrap.min.css"> <style> .h1{ text-align: center; } .btnG{ margin-top: 15px; } .w{ width: 90%; margin: 0 auto; } </style> </head> <body> <h1 class="h1">聊天室</h1> <div class="container login" id="login"> <div class="row"> <div class="w"> <input id="idName" class="form-control" type="text" placeholder="请输入名称"> </div> </div> <div class="row btnG"> <div class="col-md-1 col-lg-1"> <button type="button" id="goChartBtn" class="btn btn-default" >进入聊天室</button> </div> </div> </div> <form action="/login" type="get" name="chart"> <input type="hidden" name="name" id="name"> </form> <script src="/lib/js/jquery-3.1.0.min.js"></script> <script src="/lib/js/bootstrap.min.js"></script> <script> $("#goChartBtn").click(function(){ var val=$.trim($("#idName").val()); if(val==""){ return ; } $("#name").val(val); document.chart.submit(); }); </script> </body> </html>
聊天页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>聊天室</title> <link rel="stylesheet" href="/lib/css/bootstrap.min.css"> <style> .h1{ text-align: center; } .panel-body{ height: 400px; overflow: auto; } .footer{ position: fixed; bottom: 10px; left: 0; width: 100%; } .chartText{ width: calc(100% - 60px); display: inline-block; } </style> </head> <body> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">聊天室,欢迎:<span id="uName"><%=name%></span></h3> </div> <div class="panel-body"> <ul class="list-group" id="fayan"> </ul> </div> </div> <div class="footer"> <div class="all"> <select name="all" id="all"> <option value=""></option> </select> </div> <input type="text" name="chart" placeholder="请发言..." class="form-control chartText" id="chart"><button class="btn" id="send">发送</button> <button class="btn btn-lg btn-danger" id="leave">离开</button> </div> <script src="/socket.io/socket.io.js"></script> <script src="/lib/js/jquery-3.1.0.min.js"></script> <script src="/lib/js/bootstrap.min.js"></script> <script> var socket = io(); var username=$("#uName").text(); socket.emit("join user",{ username:username }); //所有用户展示 socket.on("join user",function(data){ $("#all").empty(); var opt='<option value="_val_">_val_</option>'; var str='<option value="charts">所有</option>'; for(var i=0;i<data.length;i++){ if(data[i]!=username){ str+=opt.replace(/_val_/g,data[i]); } } $("#all").html(str); }); //私聊 socket.on(username,function(data){ $("#fayan").prepend('<li class="list-group-item"><span>私聊:'+data.name+'</span>:<span>'+data.d+'</span></li>'); }); //所有 socket.on("charts",function(data){ $("#fayan").prepend('<li class="list-group-item"><span>所有:'+data.name+'</span>:<span>'+data.d+'</span></li>'); }); //离开 socket.on("leave chart",function(data){ $("#fayan").prepend('<li class="list-group-item"><span>'+data.name+'</span><span>'+data.d+'</span></li>'); }); $("#chart").on("keyup",function(e){ if(e.keyCode==13){ sendSocket(); } }); $("#send").on("click",function(){ sendSocket(); }); function sendSocket(){ var val=$("#chart").val(); if(val==""){ return ; } var sel=$("#all").val(); if(sel=="charts"){ socket.emit("chart msg", { type:"1", name:$("#uName").text(), d: val }); }else{ socket.emit("chart msg", { type:"2", to:sel, name:$("#uName").text(), d: val }); } $("#chart").val(""); } $("#leave").click(function(){ socket.emit("leave chart",{ name:$("#uName").text(), d:"离开..." }); $.get("/leave"); window.location.reload(); }); </script> </body> </html>
这个比较厉害的是互相之间可以送对象，那很简单，所以可以进行一个你猜我答之类的画图。
