Web Socket & Socket.io

时间 2019-11-06

标签 web socket socket.io 栏目 HTML 繁體版

原文原文链接

HTTP

HTTP没法轻松实现实时应用：javascript

HTTP协议是无状态的，服务器只会响应来自客户端的请求，可是它与客户端之间不具有持续链接。
咱们能够很是轻松的捕获浏览器上发生的事件（好比用户点击了盒子），这个事件能够轻松产生与服务器的数据交互（好比Ajax）。可是，反过来倒是不可能的：服务器端发生了一个事件，服务器没法将这个事件的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候，所发生事件的信息才会从服务器传递到客户端。

可是，确实聊天室确实存在html

方法：java

长轮询：客户端每隔很短的时间，都会对服务器发出请求，查看是否有新的消息，只要轮询速度足够快，例如1秒，就能给人形成交互是实时进行的印象。这种作法是无奈之举，实际上对服务器、客户端双方都形成了大量的性能浪费。
长链接：客户端只请求一次，可是服务器会将链接保持，不会返回结果（想象一下咱们没有写res.end()时，浏览器一直转小菊花）。服务器有了新数据，就将数据发回来，又有了新数据，就将数据发回来，而一直保持挂起状态。这种作法的也形成了大量的性能浪费。

WebSocket协议

WebSocket协议可以让浏览器和服务器全双工实时通讯，互相的，服务器也能主动通知客户端npm

WebSocket的原理很是的简单：利用HTTP请求产生握手，HTTP头部中含有WebSocket协议的请求，因此握手以后，两者转用TCP协议进行交流（QQ的协议）。如今的浏览器和服务器之间，就是QQ和QQ服务器的关系了。因此WebSocket协议，须要浏览器支持，更须要服务器支持。
支持WebSocket协议的浏览器有：Chrome 四、火狐四、IE十、Safari5
支持WebSocket协议的服务器有：Node 0、Apach7.0.二、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用户接受。
发送的内容能够是任何类型的值。socket

案例

前台页面：函数

<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);