前后端通信：WebSocket之实时监控

一、前言

WebSocket是一种比http更高级的协议，它主要解决http单向、无状态、半双工的缺点，一次握手就可以让服务器和客户端之间实现连续不断的、双向的、数据传输。

最近，在做一个实时数据采集的项目，后端主要的数据采集功能实现的差不多了，所以现在考虑做个Web监控客户端，给项目上个远程操作。

二、前端之路

身为一个C语言出身的菜鸟，从未接触过web前端技术。怎么办？自学吧。身为一个菜鸟，自然就找到了菜鸟教程。花了一周时间，一股脑地把HTML/CSS/Javascript以及jQuery/Bootstrap/Ajax/Cookie/Session这些个技术都了解了一遍。好不容易实现了登录功能。

• 登录的大致流程：
  Web端输入用户名、密码，通过ajax传到后端，后端将它们与本地的密码文本对比来验证，验证结果返回给前端，前端通过storageSession来保持会话，防止直接url访问。主要架构如下：
• 服务器：BOA（考虑嵌入式arm的硬件平台）
• 服务器通信：CGI（C库-cgic、json-c库）
• 密码文本格式：json
• 加密算法：AES
• 会话保持：storageSession

三、实时通信

我的需求是web客户端可以实时监控底层数据。上网搜了搜，找到两种方式：Ajax轮询、websocket。

1. Ajax轮询

Ajax：不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

首先来说下第一种——Ajax轮询。顾名思义，基于Ajax的轮询，即设置一个周期T，每T秒向服务端请求一次数据，从而达到实时显示的功能，本质上还是http的request/response模式。话不多说，直接上个精简的js代码：

<script>
    setInterval("getData()", 1000);
    function getData() {
    $.ajax({
        url: '/cgi-bin/test.cgi',
        success: function (returnData) {
            alert("getData: " + returnData);
            }
        });
    }
</script>

上例中setInterval函数设置周期T=1000ms，执行getData函数，获取数据。这种方案其实也满足了实时监控这个需求，但每次都是客户端主动请求，浪费带宽。本着勤俭节约的原则，我又发现了第二种方法——websocket

WebSocket

websocket只需要一次握手，接下来就能直接传数据啦，你传给我、我传给你、想怎么传就怎么传，用来做实时通信再合适不过。

OK！既然有这么方便的技术，那就赶紧拿过来用吧。我又发现了一个很牛的开源库——websocketd。它最厉害的一点就是：服务器端什么语言都行，管你什么PHP、python、java还是c，哪个舒服用哪个，所以官网说，10秒钟轻松入门，果不虚言。下面演示下mac上的websocketd使用：

MAC OSX平台下的websocketd使用

1. brew install websocketd // 通过brew安装websocketd，也可官网下载安装包
2. cd /usr/local/Cellar/websocketd/0.3.1
3. ./websocketd --port=8080 /Users/xxx/your_backend_program
   其中后台处理程序：your_backend_program，我用的官网平台的C语言例程

#include <stdio.h>
#include <unistd.h>

int main() {
    int i;

    // Disable output buffering.
    setbuf(stdout, NULL);

    for (i = 1; i <= 10; i++) {
        printf("date = %d\n", i);
        usleep(500000);
    }

    return 0;
}

// 编译命令：gcc test.c -o your_backend_program

前台js程序就是读取这些后端的这10个数字

<script>
var ws = new WebSocket('ws://localhost:8080/');

ws.onmessage = function(event) {
  console.log('Count is: ' + event.data);
};
</script>

终端会看到连接和断开连接的消息，浏览器的控制台可以看到如下数据：

实际使用的话，后端程序获得实时数据，通过websocket传给前端。至此，完成了利用websocket技术实现实时监控的功能。

总结

工作一年了，这也是我第一次发表技术博客，没想到竟然是前端相关的，身为一个C语言出身的（大学时代学的第一门计算机语言），感觉有点奇妙，特此记录一下。
目前来看，要做好程序员的工作，关键还是得持续、高效地学习。高效学习，就要有输出，不如开始写博客，一步一步提升自己吧！