Web Socket & Socket.io

2019年8月30日 220次阅读 来源: alogy

HTTP

HTTP没法轻松完成及时运用：

  • HTTP协定是无状况的，服务器只会相应来自客户端的要求，然则它与客户端之间不具备延续衔接。
  • 我们可以异常轻松的捕捉浏览器上发作的事宜（比方用户点击了盒子），这个事宜可以轻松发生与服务器的数据交互（比方Ajax）。然则，反过来倒是不可能的：服务器端发作了一个事宜，服务器没法将这个事宜的信息及时主动关照它的客户端。只需在客户端查询服务器的当前状况的时刻，所发作事宜的信息才会从服务器通报到客户端。

然则，确切聊天室确切存在

要领：

  • 长轮询：客户端每隔很短的时候，都会对服务器发出要求，检察是不是有新的音讯，只需轮询速率足够快，比方1秒，就可以给人形成交互是及时举行的印象。这类做法是无法之举，实际上对服务器、客户端两边都形成了大批的机能糟蹋。
  • 长衔接：客户端只需求一次，然则服务器会将衔接坚持，不会返回效果（设想一下我们没有写res.end()时，浏览器一向转小菊花）。服务器有了新数据，就将数据发回来，又有了新数据，就将数据发回来，而一向坚持挂起状况。这类做法的也形成了大批的机能糟蹋。

WebSocket协定

WebSocket协定可以让浏览器和服务器全双工及时通讯，相互的，服务器也能主动关照客户端

  • WebSocket的道理异常的简朴：应用HTTP要求发生握手，HTTP头部中含有WebSocket协定的要求，所以握手以后，两者转用TCP协定举行交换（QQ的协定）。如今的浏览器和服务器之间，就是QQ和QQ服务器的关系了。所以WebSocket协定，须要浏览器支撑，更须要服务器支撑。
  • 支撑WebSocket协定的浏览器有：Chrome 4、火狐4、IE10、Safari5
  • 支撑WebSocket协定的服务器有：Node 0、Apach7.0.2、Nginx1.3
  • Socket.IO是业界良知，新手福音。它屏障了一切底层细节，让顶层挪用异常简朴。而且还为不支撑WebSocket协定的浏览器，供应了长轮询的通明模仿机制。
  • Node.js上须要写一些顺序，来处置惩罚TCP要求。 运用require(‘dgram’) 模块
  • Node的单线程、非壅塞I/O、事宜驱动机制，使它异常合适Socket服务器。

Socket.io

npm install socket.io

制造index.html页面。页面中必需引入 /socket.io/socket.io.js, 挪用io函数，获得socket对象。

<script src="/socket.io/socket.io.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var socket = io();  //socket 对象
</script>

服务器中：

var io = require('sockte.io')(server);
io.on('connection',function( socket ){
    //socket 对象
    socket.on('tiwen',function( msg ){
        console.log('服务器接收到了要求');
        //sockte.emit('huida','ok'); //单条返回
        //播送 , 就是给当前一切用户的发送信息。
        io.emit('huida','ok');
    });
});

客户端和服务器，都有socket对象。 两个对象都具有emit，和on的时候。emit用于发送，on用户接收。
发送的内容可所以任何范例的值。

案例

前台页面：

<body>

<h1>index页面</h1>
信息内容：<input type="text" name="" id="info" value="" />
发送： <input type="button" name="" id="btn" value="发送" />
<script src="/socket.io/socket.io.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
  var socket = io();
  document.getElementById("btn").onclick = function (  ) {
    socket.emit('tiwen',document.getElementById("info").value);
  }
  socket.on('huida',function ( msg ) {
    console.log('回复：' +　msg);
  });
</script>
</body>

背景：

var http = require('http');
var fs = require('fs');

var server = http.createServer(function ( req,res ) {
  if (  req.url == '/' ) {
    // 显现首页
    fs.readFile('./index.html',function ( err,data ) {
      res.end(data);
    });
  }
});


// 建立io对象
var io = require('socket.io')(server);

// 监听衔接事宜
io.on('connection',function ( socket ) {
  console.log( '一个客户端衔接了' );
  socket.on('tiwen',function ( msg ) {
        // console.log( '发问为：' + msg );
        // socket.emit('huida','好呀');
    // 加上播送
    io.emit('huida',msg);
  });
});

server.listen(80);
    原文作者：alogy
    原文地址: https://segmentfault.com/a/1190000005690589
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞