东东prefer

Cowboy http服务器 websocket

一、基础介绍

cowboy是一个小巧、快速、模块化的http服务器，采用Erlang开发。其中良好的clean module使得我们可以扩展到多种网络协议之中，cowboy自带的有tcp和ssl，而也有一些人提供了smtp等的扩展。

    cowboy的特点：

    1.代码少。

    2.速度快。

    3.模块化程度高，transport和protocol都可轻易替换。

    4.采用二进制语法实现http服务，更快更小。

    5.极易嵌入其它应用。

    6.有dispatcher，可以嵌入FastCGI PHP 或者是 Ruby.

    7.没有进程字典，代码干净。

 

https://github.com/marcelog/erws

1 引言

Erlang可以用来实现一个websocket服务器。cowboy这样框架可以完成这个任务，使我们不必关注websocket协议的细节。在吃正餐之前，我们先来点围碟：

 

[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 WebSocket通信协议于2011年被IETF定为标准 RFC 6455，WebSocketAPI被W3C定为标准。在WebSocket API中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。  
  2.   
  3. 现在，很多网站为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。  
  4.   
  5. 而最比较新的技术去做轮询的效果是长轮询(long polling)，这是很古老的技术。长轮询的优势在于，它完全颠覆了典型的客户端发送请求的做法。长轮询的核心在于客户端和服务器间的相互联系，打破了客户端尽快发送请求的传统惯例。客户端期望服务器能够长时间留住请求，保持潜在的TCP连接的开放性。只要服务器拥有希望同客户端共享的信息，它就会将数据传送给客户端并终止连接。这种做法的效率相对较高，免除了所有HTTP请求的麻烦。客户端收到更新数据后马上向服务器发送下个请求，依然期望服务器留住该请求，直到有需要传回的数据为止。  
  6.   
  7. 基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性。长连接、长轮询一般应用与WebIM、ChatRoom和一些需要及时交互的网站应用中。其真实案例有：WebQQ、Hi网页版、Facebook IM等。  
  8.   
  9. 而在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即使服务带来了两大好处：  
  10.   
  11. Header，互相沟通的Header是很小的-大概只有 2 Bytes  
  12. Server Push，服务器可以主动传送数据给客户端。  
  13. 因此WebSocket是一种更新更优秀的技术。  

2 为什么用cowboy

cowboy是终极悍将。到目前为止（2012-05），可用来写websocket服务的erlang工具有：

Socket.io-Erlang

这是最有吸引力的方法，因为可以用在客户端。Socket.io非常受欢迎，特别在NodeJS里，因为其中一个作者(Frederic Trottier-Hebert)也是LearnYouSomeErlang的作者。可是自从socket.io 0.6.x之后，作者就不再添加新功能。所以对这个产品非常不利。

MochiWeb

非常流行的HTTP框架，但是本身不支持websocket。

Yaws

这个是全功能的 HTTP server，足够健壮性、可扩展性 。适用于静态和动态页面，也支持websockets。但是对我的需求来说，有点杀鸡用牛刀。当然，如果没有其他方案好用，我肯定会选择这个。(译者注：Yaws也是我下一个要学习使用的产品)

Misultin

原作者表示不再更新，已经转向mochiweb和cowboy。

Cowboy

非常有意思的东西。HTTP是这个产品框架的一部分。这个东西更像一个连接池，我们可以设置处理TCP或SSL连接。最大的缺点是缺乏文档，出了问题有时候需要看源代码。

3 开始编程

原文使用了rebar来构建项目。Rebar是一款Erlang的构建工具，使用它可以方便的编译、测试erlang程序、内联驱动和打包Erlang发行版本。

【译者：我继续使用上一篇文章的make工具（Erlang cowboy入门参考），因此，本文与原文略有出入】

这次，我们创建一个erws(Erlang WebSocket)，主要的模块就是erws_handler.erl，所有必要的文件都会在下面展示。

当程序运行，cowboy会监听8080端口，分发HTTP请求到erws_handler。

erws_handler实现了2个处理器：cowboy_http_handler和cowboy_websocket_handler。第一个处理器接受普通的HTTP GET请求，并启动websocket完成握手，这个过程通过发送必要的头信息使HTTP连接升级(upgrade)，如协议所述。对我们来讲，这个过程非常简单，我们只需要对erws_handler:init/1(参考代码)返回一个元组。所有脏活都是由cowboy的模块cowboy_http_websocket来完成。

一旦这个过程完成，通过调用cowboy_http_websocket_handler暴露出来的api，我们就可以把收到的请求当作消息处理，和普通的gen_server非常类似。

二、自己整理开源代码

 

三、创建项目

 

[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. $ mkdir erws && cd erws  
  2. $ wget --no-check-certificate https://raw.githubusercontent.com/ninenines/erlang.mk/master/erlang.mk  
  3. $ make -f erlang.mk bootstrap bootstrap-rel  
  4. $ make  

 

erws_app.src

 

注意：一定要加入"crypto"模块，否则websocket连接无法建立。crypto在websocket连接握手时被cowboy用到。

erws_app.src 资源文件用来生成程序的描述，全文如下：

 

[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. {application, erws, [  
  2.     {description, "Erlang WebSocket Demo By cheungmine"},  
  3.     {vsn, "1"},  
  4.     {modules, []},  
  5.     {registered, []},  
  6.     {applications, [  
  7.         kernel,  
  8.         stdlib,  
  9.         crypto,  
  10.         cowboy,  
  11.         compiler,  
  12.         syntax_tools  
  13.     ]},  
  14.     {mod, {erws_app, []}},  
  15.     {env, []}  
  16. ]}.  

 

Makefile

内容如下：

 

[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. PROJECT = erws  
  2. DEPS = cowboy  
  3. include erlang.mk  

 

erws_app.erl

这个代码设置cowboy监听并接受连接。然后分发请求到指定模块。代码全文如下：

[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. -module(erws_app).  
  2. -behaviour(application).  
  3.   
  4. -export([start/2]).  
  5. -export([stop/1]).  
  6.   
  7. start(_Type, _Args) ->  
  8.     Dispatch = cowboy_router:compile([    
  9.         {'_', [   
  10.             {"/", cowboy_static, {priv_file, erws, "index.html"}},    
  11.             {"/websocket", erws_handler, []}  
  12.         ]}  
  13.     ]),    
  14.     {ok, _} = cowboy:start_http(http, 100, [{port, 8080}],    
  15.         [{env, [{dispatch, Dispatch}]}]),  
  16.     erws_sup:start_link().  
  17.   
  18. stop(_State) ->  
  19.     ok.  

erws_sup.erl

督程代码。注意最后一行：

[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. -module(erws_sup).  
  2. -behaviour(supervisor).  
  3.   
  4. -export([start_link/0]).  
  5. -export([init/1]).  
  6.   
  7. start_link() ->  
  8.     supervisor:start_link({local, ?MODULE}, ?MODULE, []).  
  9.   
  10. init([]) ->  
  11.     Procs = [],  
  12.     {ok, {{one_for_one, 5, 10}, Procs}}.  

erws_handler.erl

生成主模块代码：

 

[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. $ make new t=cowboy_http n=erws_handler  


全文如下：

 

[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. -module(erws_handler).  
  2. -behaviour(cowboy_http_handler).  
  3. -behaviour(cowboy_websocket_handler).  
  4. -export([init/3, handle/2, terminate/3]).  
  5. -export([  
  6.     websocket_init/3, websocket_handle/3,  
  7.     websocket_info/3, websocket_terminate/3  
  8. ]).  
  9.   
  10. init({tcp, http}, _Req, _Opts) ->  
  11.     {upgrade, protocol, cowboy_websocket}.  
  12.   
  13. handle(_, State) ->  
  14.     {ok, Req2} = cowboy_http_req:reply(404, [{'Content-Type', <<"text/html">>}]),  
  15.     {ok, Req2, State}.  
  16.   
  17. websocket_init(_TransportName, Req, _Opts) ->  
  18.     {ok, Req, undefined_state}.  
  19.   
  20. websocket_handle({text, Msg}, Req, State) ->  
  21.     {reply, {text, << "responding to ", Msg/binary >>}, Req, State, hibernate };  
  22.   
  23. websocket_handle(_Any, Req, State) ->  
  24.     {reply, {text, << "whut?">>}, Req, State, hibernate }.  
  25.   
  26. websocket_info({timeout, _Ref, Msg}, Req, State) ->  
  27.     {reply, {text, Msg}, Req, State};  
  28.   
  29. websocket_info(_Info, Req, State) ->  
  30.     lager:debug("websocket info"),  
  31.     {ok, Req, State, hibernate}.  
  32.   
  33. websocket_terminate(_Reason, _Req, _State) ->  
  34.     ok.  
  35.   
  36. terminate(_Reason, _Req, _State) ->  
  37.     ok.  

 

index.html

这是WebSocket的客户端。使用支持WebSocket的浏览器访问链接：http://your-webserver-ip:8080/

如何开发这样的WebSocket页面，参考：http://dev.w3.org/html5/websockets/

erws/priv/index.html的全部内容：

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4.     <script type="text/javascript">  
  5.         var ws = new Object;  
  6.   
  7.         function send() {  
  8.             ws.send("hi, cowboy websocket by cheungmine!");  
  9.             console.log('sent');  
  10.         }  
  11.   
  12.         function open() {  
  13.             if (!("WebSocket" in window)) {  
  14.                 alert("WebSocket NOT supported by your Browser!");  
  15.                 return;  
  16.             }  
  17.   
  18.             console.log('open');  
  19.             ws = new WebSocket("ws://"+window.location.host+"/websocket");  
  20.             ws.onopen = function() {  
  21.                 console.log('connected');  
  22.             };  
  23.   
  24.             ws.onmessage = function (evt) {  
  25.                 var received_msg = evt.data;  
  26.                 console.log("Received: " + received_msg);  
  27.                 var txt = document.createTextNode("Got from server: " + received_msg);  
  28.                 document.getElementById('messages').appendChild(txt);  
  29.             };  
  30.   
  31.             ws.onclose = function() {  
  32.                 // websocket is closed.  
  33.                 console.log('close');  
  34.             };  
  35.         }  
  36.     </script>  
  37. </head>  
  38. <body>  
  39. <div id="sse">  
  40.    <a href="javascript:open()">Press Me to Open WebSocket</a><br/>  
  41.    <a href="javascript:send()">Press Me to Send hi Message</a>  
  42. </div>  
  43. <div id="messages">  
  44. </div>  
  45. </body>  
  46. </html>  

4 结论

以上就是全部代码，你可以获取全部源代码：

https://github.com/marcelog/erws

译者注：本文没有采用rebar，你可以参考：http://blog.csdn.net/ubuntu64fan/article/details/40542549

编译和运行：

[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. $ make  
  2. $ ./_rel/erws_release/bin/erws_release console  

显示如下：

(erws@127.0.0.1)1>

输入q().可以退出服务。

打开FireFox浏览器，地址栏输入：http://192.168.82.181:8080/，显示如下：

此时按Send hi Message，页面没有任何反应。先点Open WebSocket，再点Send hi，结果如下：

 

完全正确

 

尽管我也不怎么喜欢代码中依赖别人提供的框架，但是cowboy确实干的不错，我认为cowboy是构造复杂应用不错的选择。不仅仅是支持websocket，同时还有HTTP和HTTPS。

最重要的是，cowboy让你关注业务而不是技术实现细节，比如构建连接池，websocket协议等。仅仅几行代码，我们就可以给沉闷乏味的web程序带来魔力。


本文不是原文的简单翻译，是参考原文，根据我的理解和实践写出来的。参考内容于：http://marcelog.github.io/articles/erlang_websocket_server_cowboy_tutorial.html及github 的cowboy源码

 

posted on 2017-03-07 20:07  东东prefer  阅读(2453)  评论(0)  编辑  收藏  举报

导航