前后端通信：WebSocket之实时监控
- 一、前言
- 二、前端之路
- 三、实时通信
- 1. Ajax轮询
- WebSocket
- MAC OSX平台下的websocketd使用
- 总结
一、前言
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使用
-
brew install websocketd// 通过brew安装websocketd，也可官网下载安装包 cd /usr/local/Cellar/websocketd/0.3.1-
./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语言出身的（大学时代学的第一门计算机语言），感觉有点奇妙，特此记录一下。
目前来看，要做好程序员的工作，关键还是得持续、高效地学习。高效学习，就要有输出，不如开始写博客，一步一步提升自己吧！
