zoukankan      html  css  js  c++  java

  • WebSocket学习笔记——无痛入门

     

    WebSocket学习笔记——无痛入门 

    标签： websocket
    2014-04-09 22:05 4987人阅读 评论(1) 收藏 举报
     分类：

    版权声明：本文为博主原创文章，未经博主允许不得转载。

    0.前言
            本人一直专注于IoT领域，前些时间尝试了REST API使用PHP Slim框架构建应用。传感器数据的上传可以高效的实现，可以定时上传传感器检测结果，而这些检测结果每条都是有用的。若需要实现相关控制功能，那么设备就需要轮询，而在轮询的过程中仅有几条报文是有用的，绝大多数报文仅仅是HTTP请求首部。为了解决该问题，我找到了WebSocket并决定尝试一下。
        【websocket介绍】
        【尝试的困惑】
        简单来说，应用websocket最好的途径便是nodejs，由于没有接触过nodejs所以硬着头皮努力学习。尝试了若干网上的资料和例子之后，我发现根本就分不清哪些代码是浏览器中的javascript，哪些代码是服务器中的nodejs，加上一个著名的nodejs websocket插件socket.io，让websocket尝试之旅异常糊涂。
        【本文目的】
        用最少的代码和操作步骤把websocket跑起来。本文只有一处代码——运行浏览器中的HTML+Javascript，取名为HelloWebSocket.html，三个操作步骤——下载并安装mod_pywebsocket、运行其中的standalone.py、使用浏览器打开HelloWebSocket.html。
     
    1.最终效果
        最终效果可以分为4步——1.运行javascript脚本，2.检测浏览器是否支持websocket，3.通过websocket发送内容，4.通过websocket接收内容。服务器侧实现websocket回显功能，即直接向浏览器返回接收内容。
    图1 运行javascript脚本
    图2 检测浏览器是否支持websocket
    图3 通过websocket发送内容
    图4 通过websocket接收内容
     
    2.服务器侧实现
        【下载和安装mod_pywebsocket】
        【下载】
        mod_pywebsocket项目【链接】——pywebsocket主要用于websocket的测试和实验目的，pywebsocke运行需要Apache服务器并且需要提前安装和使能mod_python，但是若只运行standalone.py，那么可以在没有apache和mod_python下实践websocket。
        【安装】
        进入pywebsocket目录，输入以下指令
        python setup.py install
     
        【运行standalone.py】
        进入srcmod_pywebsocket目录，运行standalone.py
        输入以下指令（请注意指令和路径有关，请务必进入srcmod_pywebsocket目录）
        python standalone.py -p 9998 -d ../example/
        -p参数表示端口号，此处为9998
        -d参数代表文件根目录，此时为上一级目录的example文件夹
     
        【浏览器中尝试】
        在浏览器中输入localhost:9998/console.html，你可以尝试connent，send和print state等按钮，对websocket有一个基本印象，甚至可以打开chrome开发者工具并查看Network，你会发现只能抓取connet按钮相关HTTP请求，而按下send按钮时虽然浏览器页面产生变化但Network毫无反应。
    图5 pywebsocket中的console例子
     
    3.客户端实现
        【客户端代码】——HelloWebSocket.html
    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE HTML>  
    2. <html>  
    3. <head>  
    4. <script type="text/javascript">  
    5. function WebSocketTest()  
    6. {  
    7.   if ("WebSocket" in window)  
    8.   {  
    9.      alert("WebSocket is supported by your Browser!");  
    10.      // Let us open a web socket  
    11.      var ws = new WebSocket("ws://localhost:9998/echo");  
    12.      ws.onopen = function()  
    13.      {  
    14.         // Web Socket is connected, send data using send()  
    15.         ws.send("Hello WebSocket");  
    16.         alert("Message is sent");  
    17.      };  
    18.      ws.onmessage = function (evt)  
    19.      {  
    20.         var received_msg = evt.data;  
    21.         alert("Message is received: " + received_msg);  
    22.      };  
    23.      ws.onclose = function()  
    24.      {  
    25.         alert("Connection is closed");  
    26.      };  
    27.      ws.error = function()  
    28.      {  
    29.         alert("Error Happended");  
    30.      };  
    31.   }  
    32.   else  
    33.   {  
    34.      // The browser doesn't support WebSocket  
    35.      alert("WebSocket NOT supported by your Browser!");  
    36.   }  
    37. }  
    38. </script>  
    39. </head>  
    40. <body>  
    41. <div id="sse">  
    42.    <a href="javascript:WebSocketTest()">Run WebSocket</a>  
    43. </div>  
    44. </body>  
    45. </html>  
     
        【代码说明】
        【1】var ws = new WebSocket("ws://localhost:9998/echo");
                创建一个WebSocket 对象，请注意ws://localhost:9998/echo，ws而非http，并且请注意端口号的设备和服务器端完全相同。
        【2】     
        ws.onopen = function()
         {
            // Web Socket is connected, send data using send()
            ws.send("Hello WebSocket");
            alert("Message is sent");
         }; 
        在websocket的世界中总共有4种事件——onopen、onclose、onmessage和onerror
        【onopen】websocket建立连接完成
        【onclose】websocket连接被关闭或无法建立连接
        【onmessage】websocket收到数据，发送数据对应socket.send方法
        【onerror】websocket发生错误
     
        【3】
        ws.onmessage = function (evt)  
         {  
            var received_msg = evt.data; 
            alert("Message is received: " + received_msg); 
         };
        通过警告框显示服务器回显内容，服务器向浏览器返回内容位于evt.data中。
     
    图6 websocket的4种事件
     
        【运行结果】
            见——最终效果
     
    4.总结和期望
        1.继续学习websocket细节，深入协议本身。
        2.利用websocket制作一个网络聊天室，和其他websocket网络聊天室不同的——参与者不但有浏览器还有嵌入式设备。
     
    5.参考资料
  • 相关阅读:
    制作文件的备份
    文件的读写
    文件的打开与关闭
    文件操作介绍
    数据类型转换
    位运算
    进制
    函数使用注意事项
    匿名函数
     递归函数
  • 原文地址：https://www.cnblogs.com/qingchen1984/p/5015914.html
Copyright © 2011-2022 走看看