摘要：随着互联网发展的越来越快、越来越完善，以B/S架构为基础的服务器开发模式逐渐取代了传统的C/S架构的开发模式。如今，前、后端开发分离的方式和前端开发工程化的方式都深入人心，无论是哪种方式，都需要选择一套合适的前端开发框架，合适的开发框架不仅可以提高系统的各种性能而且可以优化用户体验。同时，伴随着计算机应用技术的迅猛发展和广泛的应用，计算机技术也应用到化工企业的安全监控系统中，基于工业云平台的安全监控系统已经是化工企业保证安全生产的必要手段。

本文首先介绍了基于Web的化工企业安全监控服务器的发展历史和发展现状，并对基于Web的工业监控系统的现状及存在的问题进行分析。通过对当前存在的化工企业安全监控服务器实现方案进行深入研究分析，选择了基于B/S架构的工业远程监控服务器的解决方案，并对服务器结构和需要实现的功能进行深入的研究和探讨，提出需要解决的关键问题，并给了具体的设计方案。其次，在经过方案比较滞后，选择了脚本语言JS作为本次服务器前端的开发语言，信息传输协议采用MQTT协议，在对主流的前端开发框架进行对比之后，选择利用当前比较流行的基于MVVM的Vue.js开发框架来开发服务器的前端工程。然后,从数据存储、显示以及订阅/发布时间的角度出发，分析基于B/S的工业远程监控服务器的若干关键技术，主要包括数据库的选择与实现、实时数据显示等技术，并给出解决技术难点的路线以及改进措施,解决了服务器在数据接收、存储、分析上存在的问题，以及在实时性和安全性等方面存在的问题。

关键词：MQTT协议，JavaScript，监控服务器，B/S，Vue.js

目录

摘要

ABSTRACT

第一章 绪   论-1

1.1本课题研究的意义-1

1.2研究领域现状-2

1.3发展趋势-3

1.4所要做的工作-4

第二章 方案设计-6

2.1 需求分析-6

2.2 开发架构的选择-6

2.3 数据网络传输协议的选择-8

2.3.1 MQTT协议简介-8

2.3.2 MQTT协议实现方式-9

2.3.3 OPC协议简介-10

2.3.4 OPC 协议的通讯方式-10

2.3.5 OPC协议的特点-10

2.4 开发语言的选择-11

2.4.1 HTML技术-11

2.4.2 CSS技术-12

2.4.3 JavaScript技术-12

2.5 Vue.js开发框架的选择-14

2.5.1 开发框架对比-14

2.5.2响应式系统-15

2.6 数据库的选择-16

2.7本章小结-16

第三章 安全监控服务器设计及实现-17

3.1服务器前端设计-18

3.2 前端获取数据-20

3.2 前端显示数据并实时更新-21

3.3数据存储模块-22

3.3.1 用户信息表-23

3.3.2 设备信息表-23

3.3.3 设备订阅表-24

3.3.4 任务信息表-24

3.4 本章小结-25

第四章  服务器调试-26

4.1 调试方案-26

4.2 调试结果-26

4.3 本章小结-27

总结与展望-28

参考文献-29

致  谢-30