一、前言

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语言出身的（大学时代学的第一门计算机语言），感觉有点奇妙，特此记录一下。
目前来看，要做好程序员的工作，关键还是得持续、高效地学习。高效学习，就要有输出，不如开始写博客，一步一步提升自己吧！

前后端通信：WebSocket之实时监控相关推荐

如何使用websocket实现前后端通信
如何使用websocket实现前后端通信 websocket通信是很好玩的,也很有用的的通信方式,使用方式如下: 第一步由于springboot很好地集成了websocket,所以先在在pom.xml ...
05-ET框架的前后端通信1
TIPS: 本系列贴仅用于博主学习ET框架的记录文章目录前言一.ET框架的前后端如何进行通信的? 二.前后端的通信使用 1.编写protobuf消息体 2.编写C#代码 3.运行结果总结前言 ...
06-ET框架的前后端通信2
TIPS: 本系列贴仅用于博主学习ET框架的记录文章目录前言一.IMessage是什么? 二.使用步骤 1.编写proto消息体 2.编写C#代码 3.运行结果总结前言这篇文章记录ET框架 ...
java使用websocket前后端通信实现
文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源. WebSocket是客户端和服务器端的一个通信,WebSocket分为客户端和服务端,所以我 ...
ajax前后端通信的头部消息之请求头与响应头
前后端在通信时,互相发送的消息包括头部消息和主体数据,而头部消息分为请求头和响应头两种. 请求头是前端发送,服务端获取. 响应头是服务端发送,前端获取. 设置请求头的规则: 请求头设置必须在open方 ...
Angular前后端通信
今天第一次成功的完成了前后端的通信问题:将数据库的数据传输到了前端显示,现在回头看确实是很简单,而且框架也是现成的,我只是将旧的版本中的代码迁移至新的版本中来,这就分为了前端和后端两部分,之前觉得困难 ...
前后端通信跨域网络协议 DNS CDN HTTPS
本篇文章有点长,内容比较枯燥,就当作知识点的整理了. 服务在局域网中通过某些服务软件开启WEB服务功能,在该局域网中其它用户可以通过该打开服务的电脑 IP,找到该服务下web页面,默认打开的页面是i ...
前后端通信，这中间到底发生了什么？
前两天面试,面试官问了我一个问题,刨根到底的问,把我问的快哭了,事后回来赶紧补功课! 面试官:前后端是怎么通信的我: 通过http发送一个请求,根据请求的地址,找到对应的SQL,返回最终的数据面试 ...
Flask+Axios+jQuery构建前后端通信的小例子
比较暴力但好理解的方法,下面详细说一下. 工具准备 Flask pip install flask Axios https://cdnjs.cloudflare.com/ajax/libs/axios ...
WebSocket 实现前后端通信的笔记
之前在做站内信时,用到了 WebSocket ,整理了一些笔记分享如下. 本文基于 SpringBoot 2.1.5,本文不涉及环境搭建. 引入依赖在 Spring 中要使用 WebSocket 功 ...

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