标签： websocket
2014-04-09 22:05 4987人阅读 评论(1) 收藏 举报
 分类：
物联网学习笔记（37） 

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

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】
    进入\src\mod_pywebsocket目录，运行standalone.py
    输入以下指令（请注意指令和路径有关，请务必进入\src\mod_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
  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.参考资料

WebSocket学习笔记——无痛入门的更多相关文章

  1. WebSocket学习笔记IE，IOS，Android等设备的兼容性问

    WebSocket学习笔记IE,IOS,Android等设备的兼容性问 一.背景 公司最近准备将一套产品放到Andriod和IOS上面去,为了统一应用的开发方式,决定用各平台APP嵌套一个HTML5浏 ...

  2. python学习笔记--Django入门四 管理站点--二

    接上一节  python学习笔记--Django入门四 管理站点 设置字段可选 编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...

  3. WebSocket 学习笔记

    WebSocket 学习笔记 来自我的博客 因为项目原因需要用到双工通信,所以比较详细的学习了一下浏览器端支持的 WebSocket. 并记录一些遇到的问题. 简介 WebSocket 一般是指浏览器 ...

  4. Java学习笔记之---入门

    Java学习笔记之---入门 一. 为什么要在众多的编程语言中选择Java? java是一种纯面向对象的编程语言 java学习起来比较简单,适合初学者使用 java可以跨平台,即在Windows操作系 ...

  5. DBFlow框架的学习笔记之入门

    什么是DBFlow? dbflow是一款android高性的ORM数据库.可以使用在进行项目中有关数据库的操作.github下载源码 1.环境配置 先导入 apt plugin库到你的classpat ...

  6. MongoDB学习笔记:快速入门

    MongoDB学习笔记:快速入门   一.MongoDB 简介 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能.M ...

  7. 学习笔记_J2EE_SpringMVC_01_入门

    1.    概述 笔者作为一个不太正经的不专业佛教信仰者,习惯了解事物的因果关系,所以概述就有点BBB...了.如果不喜欢这些的,请自行跳过概述章节,直接进入第二章的操作实践:2 入门示例. 1.1. ...

  8. dubbo入门学习笔记之入门demo(基于普通maven项目)

    注:本笔记接dubbo入门学习笔记之环境准备继续记录; (四)开发服务提供者和消费者并让他们在启动时分别向注册中心注册和订阅服务 需求:订单服务中初始化订单功能需要调用用户服务的获取用户信息的接口(订 ...

  9. SpringBoot学习笔记<一>入门与基本配置

    毕业实习项目技术学习笔记 参考文献 学习视频 2小时学会Spring Boot:https://www.imooc.com/learn/767 学习资料 SpringBoot入门:https://bl ...

随机推荐

  1. 2016NEFU集训第n+3场 D - Bicycle Race

    Description Maria participates in a bicycle race. The speedway takes place on the shores of Lake Luc ...

  2. Openjudge-计算概论（A）-计算三角形面积

    描述: 平面上有一个三角形,它的三个顶点坐标分别为(x1, y1), (x2, y2), (x3, y3),那么请问这个三角形的面积是多少. 输入输入仅一行,包括6个单精度浮点数,分别对应x1, y1 ...

  3. KVM 虚拟化基本搭建

    KVM虚拟化技术 KVM是基于x86架构上Linux操作系统的全虚拟化解决方案 ,在Centos6.3系统中,kvm已经被集成到内核中,相当于使用内核来做虚拟机管理程序.由于KVM本身就工作于内核环境 ...

  4. SQL Server 2012中快速插入批量数据的示例及疑惑

    SQL Server 2008中SQL应用系列--目录索引 今天在做一个案例演示时,在SQL Server 2012中使用Insert语句插入1万条数据,结果遇到了一个奇怪的现象,现将过程分享出来,以 ...

  5. log4j2配置MDC分线程写日志

    1.MDC是一个高级一些的工具,可以配置分用户(userid)写日志,也可以分线程 2.方法和道理都是相似的,在写入日志之前配置线程名或者用户id 3.如果将线程名配置为目录,可以将不同线程的日志输送 ...

  6. HDU 3499 Flight spfa+dp

    Flight Time Limit : 20000/10000ms (Java/Other)   Memory Limit : 65535/65535K (Java/Other) Total Subm ...

  7. ExecutorService的submit(Runnable x)和execute(Runnable x) 两个方法的本质区别

    Runnable任务没有返回值,而Callable任务有返回值.并且Callable的call()方法只能通过ExecutorService的submit(Callable <T> tas ...

  8. android抓日志

    1. adb logcat -c 清楚以前的日志 adb logcat -s 过滤 adb logcat -s *:E adb logcat -v 指定输出的格式 adb logcat -v brie ...

  9. Linux自动修改IP脚本（手动编写）

    #!/bin/bashnetmask=255.255.255.0IP_PATH=/etc/sysconfig/network-scripts/ifcfg-eth0GM_PATH=/etc/syscon ...

  10. hdu_5680_zxa and set(想法题)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5680 题意: 问题描述 zxa有一个集合A=\{a_1,a_2,\cdots,a_n\}A={a​1​ ...