SSE && WebSockets

参考

http://www.bitscn.com/school/HTMLCSS/201402/194940.html

WebSockets 定义了一个全双工的通信信道，只需Web上的一个 Socket即可进行通信，能减少不必要的网络流量并降低网络延迟。

大部分是围绕轮询和其他服务器端推送技术展开的，其中最著名的是Comet。Comet技术可以让服务器主动以异步方式向客户端推送数据。

Comet

Comet是服务器端的推送，实现Comet有两种方式, 长轮询和流。

长轮询

长轮询是短轮询的一个翻版，短轮询是浏览器定时向服务端发送请求看看有没有数据更新。长轮询则是浏览器发送了一个请求之后，服务端一直保持连接打开状态，直到有数据可以相应，发送完数据后关闭连接。之后浏览器再发起请求。
Http流

流不同于轮询流在页面整个生命周期只内只有一个连接，浏览器向服务器发送请求，而服务器保持连接打开，然后周期性的向浏览器发送数据。

SSE 服务器发送事件

参考

http://www.cnblogs.com/wintersun/p/3735160.html

http://www.cnblogs.com/goody9807/p/4257192.html

http://www.w3school.com.cn/html5/html_5_serversentevents.asp

简单说，所谓SSE，就是浏览器向服务器发送一个HTTP请求，然后服务器不断单向地向浏览器推送“信息”（message）。这种信息在格式上很简单，就是“信息”加上前缀“data: ”，然后以“\n\n”结尾。

(对于多行数据只有最后一行是\n\n 其他是\n)

比如这样

$ curl http://example.com/dates

data: 1394572346452

data: 1394572347457

data: 1394572348463

SSE对象有三个事件：open、error和message

SSE是单向通道，只能服务端向浏览器发送数据

使用SSE，浏览器不用频繁的发送请求，实际上在Network中就看不到请求却可以得到服务端的数据

var source = new EventSource('sse.php');

source.onmessage = function(e){

  console.log(e.data);

};

服务端

<?php

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

while(true){

  echo "data: start\n";

  echo "data:".date("Y-m-d H:i:s")."\n\n";

  // @ob_flush();

  // @flush();

  ob_flush();

  flush();

  sleep(1);

}

?>

PS SSE有跨域限制

接下来用NodeJS 来实现SSE

之前提到了SSE不能跨域，因此我们的这个NodeJS服务器不仅仅要完成SSE的处理，还要有完成页面的请求

http://www.cnblogs.com/wintersun/p/3735160.html

var http = require("http"), fs = require("fs");

var port = parseInt( process.argv[2] || 1234 );

http.createServer(function(request, response){

  console.log("Client connected:" + request.url);

  if(request.url!="/sse"){

    fs.readFile("sseNode.html", function(err,file){

      response.writeHead(200, { 'Content-Type': 'text/html' });

      var s = file.toString();  //file is a buffer

      s = s.replace("basic_sse.php","sse");

      response.end(s);

      });

    return;

    }

  //Below is to handle SSE request. It never returns.

  response.writeHead(200, { "Content-Type": "text/event-stream" });

  var timer = setInterval(function(){

    var content = "data:" + new Date().toISOString() + "\n\n";

    var b = response.write(content);

    if(!b)console.log("Data got queued in memory (content=" + content + ")");

    else console.log("Flushed! (content=" + content + ")");

    },1000);

  request.connection.on("close", function(){

    response.end();

    clearInterval(timer);

    console.log("Client closed connection. Aborting.");

    });

  }).listen(port);

console.log("Server running at http://localhost:" + port);

WebScockets

为了建立WebSocket通信，客户端和服务器在初始握手时，将HTTP协议升级到WebSocket协议。一旦连接建立成功，就可以在全双工模式下在客户端和服务器之间来回传送WebSocket消息。

ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。

事件	处理程序	说明
open	Socket.onopen	z此事件发生在套接字建立连接。
message	Socket.onmessage	此事件发生时，客户端收到来自服务器的数据。
error	Socket.onerror	此事件发生时有任何通信错误。
close	Socket.onclose	此事件发生在连接关闭。

需要知道的是socket都是建立在一个HTTP服务的基础上的，因此创建一个socket之前需要创建一个HTTP

一个简单的例子

服务端部分（NodeJS）

来自http://my.oschina.net/fuckboogie/blog/201615

 var http = require('http');

 var io = require('socket.io');

 var yourserver = http.createServer(function (request, response) {

         response.writeHead(250, { 'Content-Type': 'text/html' });

         response.end('Your WebSocket server is running');

     }).listen(1234);

var yoursocket = io.listen(yourserver);

yoursocket.on('connection', function (client) {

    client.on('message', function (data) {

        console.log('Client Message: ', data);

        var current = new Date().getTime();

        client.emit('YourMessageResponse', data + '->' + current);

    });

    client.on('disconnect', function () {

        console.log('Your Client disconnected');

    });

});

客户端部分

客户端需要引入socket.io.js 这个文件才有io对象, 这个文件在node_modules的socket.io中之前我们启动了一个端口是1234的服务器服务器会自动寻找这个文件

<script src='http://localhost:1234/socket.io/socket.io.js'></script>

    var yoursocket = null;

    yoursocket = io.connect('http://localhost:1234');

    yoursocket.on('connect', function() {

        console.log('You are connected to Server');

        yoursocket.send(new Date());

    });

    yoursocket.on('YourMessageResponse', function(data) {

        console.log('Server Response:  ' + data + '<br />');

        setTimeout(function(){

            yoursocket.send(data + new Date());

        },1000);

    });

    yoursocket.on('disconnect', function() {

        console.log('You are disconnected from Server<br />');

    });

不用socket.io 就用W3C的socket

参考

http://codular.com/node-web-sockets

服务端

var WebSocketServer = require('websocket').server;

var http = require('http');

var server = http.createServer(function(request, response) {

    console.log((new Date()) + ' Received request for ' + request.url);

    response.writeHead(404);

    response.end();

});

server.listen(8080, function() {

    console.log((new Date()) + ' Server is listening on port 8080');

});

wsServer = new WebSocketServer({

    httpServer: server,

    // You should not use autoAcceptConnections for production

    // applications, as it defeats all standard cross-origin protection

    // facilities built into the protocol and the browser.  You should

    // *always* verify the connection's origin and decide whether or not

    // to accept it.

    autoAcceptConnections: false

});

function originIsAllowed(origin) {

  // put logic here to detect whether the specified origin is allowed.

  return true;

}

wsServer.on('request', function(request) {

    if (!originIsAllowed(request.origin)) {

      // Make sure we only accept requests from an allowed origin

      request.reject();

      console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');

      return;

    }

    var connection = request.accept('echo-protocol', request.origin);

    console.log((new Date()) + ' Connection accepted.');

    connection.sendUTF('first message from server');

    connection.on('message', function(message) {

        if (message.type === 'utf8') {

            console.log('Received Message: ' + message.utf8Data);

            connection.sendUTF(message.utf8Data);

        }

        else if (message.type === 'binary') {

            console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');

            connection.sendBytes(message.binaryData);

        }

    });

    connection.on('close', function(reasonCode, description) {

        console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');

    });

});

客户端(原生的websocket)

    var soc = null;

    var websocket =  new WebSocket('ws://localhost:8080','echo-protocol');

    websocket.onopen = function(e){

        console.log(e);

        // setInterval(function(){

        //     websocket.send('hehe')

        // }, 1000);

    }

    websocket.onmessage =  function(e){

        console.log(e);

        setTimeout(function(){

            websocket.send('client');

        },1000)

    }

秒客网

SSE && WebSockets

SSE && WebSockets

Comet

SSE 服务器发送事件

WebScockets

相关文章