webSocket

Posted 小数点就是问题

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 

这个比较厉害的是互相之间可以送对象，那很简单，所以可以进行一个你猜我答之类的画图。

 

以上是关于webSocket的主要内容，如果未能解决你的问题，请参考以下文章

“未捕获的类型错误：无法在 Websocket Angular JS 上读取未定义的属性‘延迟’”

websocket弹簧启动设置

WebSocket - 关闭握手 Gorilla

WebSocket 在 1000 条消息后关闭

使用 FFmpeg 通过管道输出视频片段

低延迟 websocket html 5 游戏的数据包大小