项目开发之Nginx_push_stream_module使用

最新推荐文章于 2024-08-10 07:52:49 发布

wujindou

最新推荐文章于 2024-08-10 07:52:49 发布

阅读量3.7k

点赞数 1

分类专栏：项目开发记录文章标签： nginx php nginx_push

本文链接：https://blog.csdn.net/wujindou/article/details/21457555

版权

项目开发记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Nginx_push_stream是针对nginx开发的第三方服务器推送模块，可以使用它来搭建服务器端的推送服务。项目在https://github.com/wandenberg上，

由于项目需要所以看了下作者的几个小的例子，对该模块有了基本了解吧。。简单记录下自己的学习心得吧。。模块的安装就参看官网上的教程就可以了。

项目搭建好后可以把其中 example 和 js 目录复制到项目测试地址查看数据和测试。提供的pushstream.js文件。功能也很强大

首先项目下提供了三个例子包括:Forever Ifram \ EventSource \Websocket

ForverIframe:使用轮询方式，在与服务端建立连接后可以看到，客户端代码不断的发出轮询查询，服务端是否有消息，如果有的话就会取出来。

EventSource 很显然是事件驱动模型，而且目前主流的浏览器也支持该功能.该功能只有当服务端有事件发生，才会更新客服端请求取消息，也就是名符其实的

服务器端推送技术了。

Websocket 是HTML5提出了浏览器的WebSocket API。
WebSocket的主要作用是，允许服务器端与客户端进行全双工（full-duplex）的通信。举例来说，HTTP协议有点像发电子邮件，发出后必须等待对方回信；WebSocket则是像打电话，服务器端和客户端可以同时向对方发送数据，它们之间存着一条持续打开的数据通道。websocket现在最流行的实现就是socket.io了。

下面是配置文件信息：nginx.conf文件

location /pub {
         push_stream_publisher admin;
         push_stream_channels_path               $arg_id;
    }

    location ~ /sub/(.*) {

        push_stream_subscriber;
        push_stream_channels_path                   $1;
        push_stream_header_template                 "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">    \r\n<meta http-equiv=\"Cache-Control\" content=\"no-store\">\r\n<meta http-equiv=\"Cache-Control\" content=\"no-cache\">\r\n<meta http-eq    uiv=\"Pragma\" content=\"no-cache\">\r\n<meta http-equiv=\"Expires\" content=\"Thu, 1 Jan 1970 00:00:00 GMT\">\r\n<script type=\"text/jav    ascript\">\r\nwindow.onError = null;\r\ntry{ document.domain = (window.location.hostname.match(/^(\d{1,3}\.){3}\d{1,3}$/)) ? window.locat    ion.hostname : window.location.hostname.split('.').slice(-1 * Math.max(window.location.hostname.split('.').length - 1, (window.location.h    ostname.match(/(\w{4,}\.\w{2}|\.\w{3,})$/) ? 2 : 3))).join('.');}catch(e){}\r\nparent.PushStream.register(this);\r\n</script>\r\n</head>\    r\n<body>";
        push_stream_message_template                "<script>p(~id~,'~channel~','~text~');</script>";
         push_stream_footer_template                 "</body></html>";
        #push_stream_message_template                "{\"id\":~id~,\"channel\":\"~channel~\",\"text\":\"~text~\"}";
         default_type                                "text/html; charset=utf-8";
     }
     location ~ /ev/(.*) {
          push_stream_subscriber eventsource;
        push_stream_channels_path                   $1;
        push_stream_message_template                "{\"id\":~id~,\"channel\":\"~channel~\",\"text\":\"~text~\"}";
 
    }

测试文件： index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Event Source Example</title>
</head>
<body>
<p>Messages:</p>
<div id="messages" style="width:800px;height:300px;overflow:scroll;"></div>

<script src="/js/pushstream.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
 function messageReceived(text, id, channel) {
           document.getElementById('messages').innerHTML += id + ': ' + text + '<br>';
 };
var pushstream = new PushStream({
host: window.location.hostname,
port: window.location.port,
modes: "eventsource"
});
pushstream.onmessage = messageReceived;
pushstream.addChannel('ch1');
pushstream.connect();
// ]]>
</script>
</body>
</html>
~

这些都可以在项目文件中和文档说明中招到，然后最后的效果图。。。。