HTML部分：

<form>
    <textarea id="content_edit" name="content" style="display:none"></textarea>
</form>

JS部分：

<script>
    layui.use(['form', 'layedit'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layedit = layui.layedit;
        var content = layedit.build('content_edit'); //建立编辑器

     /* 监听表单提交 */
        form.on('submit(formSmsSubmit)', function (data) {
            data.field.content = layedit.getContent(content);
            $.ajax({
                url: "{:url('xxx')}",
                type:"POST",
                data: data.field,
                dataType:'json',
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg, {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                },
                error:function(){
                    layer.msg('提交失败', {icon: 2});
                },
            });
            return false;
        });
</script>

点击放大

废话不多说，传送门：
ProcessOn：https://www.processon.com/

收藏备用，很优秀的js UI。

传送门：http://www.ligerui.com/

LigerUI 是基于jQuery 的UI框架，其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展。简单而又强大，致力于快速打造Web前端界面解决方案，可以应用于.net,jsp,php等等web服务器环境。

传送门：https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi

采用Echarts图表控件API根据情况修改。

    ... //省略代码

    //模拟后台数据，每组6条数据
    var res = [
        [22, 34, 5, 2, 45, 29],
        [34, 74, 21, 6, 55, 69],
        [76, 64, 20, 4, 75, 22],
        [42, 39, 65, 11, 41, 49],
    ];
    //定时器
    setInterval(function getRes() {
        //获取数组中的数据组，直实环境下此段省略
        var i = parseInt(Math.random() * res.length);
        //将获取到的数据赋值给图表`option`内的`data`数组
        option.series[0].data = res[i];
        //渲染数据
        myChart.setOption(option);
    }, 1000); //间隔1秒钟向后台请求数据

    ... //省略代码

Echarts传送门：https://echarts.apache.org/zh/index.html

传送门：https://echarts.apache.org/zh/index.html

JS实时通信，两者比较：

1、EventSource 是单向通信的即 Server-->Client发送数据流。
2、WebSockets 是双向通信的，即 Server<--->Client双工数据流。

学习的文档地址：

https://developer.mozilla.org/zh-CN/docs/Server-sent_events/EventSource
https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API

作个记号，可以集成监控视频的播放器

ckplayer 传送门：ckplayer.com

网址如下：

传送门：https://github.com/omarkdev/awesome-dashboards