WebSocket与Socket.io的理解

时间 2019-11-07

标签 websocket socket.io socket 理解栏目系统网络繁體版

原文原文链接

WebSocket protocol是HTML5一种新的协议。它的最大特色就是，服务器能够主动向客户端推送信息，客户端也能够主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
javascript

HTTP设计的时候，好比浏览器直接发出请求，服务器才能响应。若是浏览器不发出request请求，服务器是不能主动找到浏览器，传输一些数据的。也就是说：浏览器必须主动请求，服务器才会发出响应。html

可是如今的web页面，对实时的要求很高：web看股票、篮球比赛图文直播、聊天室、站内信等等。
如今的作法基本都是长轮询，用通俗易懂的话来讲，就是客户端不停的（setInterval）向服务器发送请求以获取最新的数据信息。这里的“不停”实际上是有中止的，只是咱们人眼没法分辨是否中止，它只是一种快速的停下而后又当即开始链接而已。浏览器每隔好比20秒都问一下服务器，有没有人给我发站内信。服务器是不能有新消息就主动通知浏览器的。java

HTML5有了一个叫作websocket的协议，容许服务器主动发出通知。
在 WebSocket API，浏览器和服务器只须要作一个握手的动做，而后，浏览器和服务器之间就造成了一条快速通道。二者之间就直接能够数据互相传送。在此WebSocket 协议中，为咱们实现即时服务带来了两大好处：jquery

列表项目web

Header互相沟通的Header是很小的-大概只有 2 Bytes

Server Pushexpress

服务器的推送，服务器再也不被动的接收到浏览器的request以后才返回数据，而是在有新数据时就主动推送给浏览器。
websocket须要浏览器足够新，IE10+。服务器也要足够新，NodeJS天生就支持。npm

为了创建一个 WebSocket 链接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和一般的 HTTP 请求不一样，包含了一些附加头信息，其中附加头信息”Upgrade: WebSocket”代表这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息而后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 链接就创建起来了，双方就能够经过这个链接通道自由的传递信息，而且这个链接会持续存在直到客户端或者服务器端的某一方主动的关闭链接。浏览器

接下来谈谈socket.io。它是一个NodeJS用的npm包，简化了websocket的程序开发。不用socket.io也能开发websocket可是极其复杂，好比要设置HTTP头等等。下面是简单的demo。服务器

app.js:websocket

var express = require('express');
var app = express();
var http = require('http').Server(app);
//服务器端存在了一个io对象：
var io = require("socket.io")(http);
app.use(express.static("public"));
app.get('/', function(req, res){
  res.sendFile(__dirname + "/index.html");
});
//增长了一个中间件：
io.on("connect",function(socket){
  //服务器端出现了一个socket对象
  console.log("有人connect了！~~");
  socket.on("ltxx",function(info){
      console.log(info);
  });
});
http.listen(3000, function(){
  console.log('监听3000端口');
});

index.html:

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
  </head>
  <body>
    <ul id="messages">
    </ul>
    <form action="">
      <input id="m"  />
      <button>发布</button>
    </form>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script src="/jquery-1.12.3.min.js"></script>
    <script>
      var socket = io();
      $("button").click(function(){
        //socket.emit(信息名字,信息值)
        socket.emit('ltxx', $('#m').val());
        //清空文本框
        $('#m').val('');
        return false;
      })
    </script>
  </body>
</html>

浏览器emit了信息，服务器就能listen到。服务器listen使用on函数。

服务器要把本身收到的信息，再次broadcast出去，而后让全部的html页面都可以收听服务器的广播便可。