DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Securing Your Software Supply Chain with JFrog and Azure
Register Today

Trending

  • Knowing and Valuing Apache Kafka’s ISR (In-Sync Replicas)
  • Front-End: Cache Strategies You Should Know
  • Getting Started With Istio in AWS EKS for Multicluster Setup
  • Strategies for Reducing Total Cost of Ownership (TCO) For Integration Solutions

Trending

  • Knowing and Valuing Apache Kafka’s ISR (In-Sync Replicas)
  • Front-End: Cache Strategies You Should Know
  • Getting Started With Istio in AWS EKS for Multicluster Setup
  • Strategies for Reducing Total Cost of Ownership (TCO) For Integration Solutions
  1. DZone
  2. Coding
  3. JavaScript
  4. Rethinking Web-Based Device Management

Rethinking Web-Based Device Management

This primer will help put you on the right path when using web-based device management. We'll use Vue.js and WebSockets to see how it's done.

Wilfred Nilsen user avatar by
Wilfred Nilsen
·
Mar. 25, 18 · Tutorial
Like (4)
Save
Tweet
Share
8.57K Views

Join the DZone community and get the full member experience.

Join For Free

Many embedded systems use an embedded web server for device management but may not use the latest web technologies. Let's take a fresh look at web-based device management by using two modern technologies such as WebSockets and Vue.js to create a system-wide reactive user interface.

Vue.js and Reactive Applications

Frameworks such as AngularJS, ReactJS, and Vue.js greatly simplify the design of reactive applications. Many designers also consider AJAX and REST as reactive in nature. This may be true for applications that only require asynchronous message passing from the client to the server; however, for embedded systems, this model fails. In an embedded system, you may have alarms and other types of events that you want to push asynchronously and in real time to the web user interface. Polling the server using AJAX is not a good solution since reactive server events must be buffered on the server side until the next client poll cycle. This complicates the design and makes the user interface less responsive.

WebSockets

You may have an embedded web server in a device and created a user interface that you may think does not need any real-time events from the server. As an example, let's consider an embedded system controlling a light bulb. A basic web interface enables us to turn the light bulb on or off remotely. Initially, such a system does not appear to need any real-time data from the server, but have you considered what happens if two users using two different browsers try controlling the light bulb at the same time?

Embedded devices are shared resources

Providing a web interface to an embedded device requires the designer to think about the device as a shared resource. A designer cannot easily prevent multiple users from attempting to control the same hardware since anyone with access to the device can connect to it and bring up a web interface at any time.

Image title

In the above figure, two users are controlling a light bulb in a device. The "Set Event" and "Update Event" are similar to a standard AJAX RPC but with one major difference. The response is sent to both clients. This construction makes sure no connected user interfaces show stale information.

We can implement the logic required for the above user interface by using WebSockets. WebSockets provides a full-duplex asynchronous (reactive) communication channel over a single TCP connection. Because the WebSocket connections from the browsers are persistent, the embedded web server can now respond to all connected clients simultaneously.

A Real Working Example

A working example is worth a thousand words so I have assembled a fully functional reactive WebSocket application showing how to use WebSockets for controlling a light bulb. The complete example includes two Single Page Web Applications that can be loaded and run directly in the browser without having to install any software. The two applications: a Light Switch App designed using Vue.js and a Light Bulb App designed using JQuery.

See the full tutorial for details: Modern Approach to Embedding a Web Server in a Device

The following video shows how to use the two Single Page Web Applications:


Web server application Interface (computing) WebSocket Light (web browser) Event Vue.js Message passing Web Protocols

Opinions expressed by DZone contributors are their own.

Trending

  • Knowing and Valuing Apache Kafka’s ISR (In-Sync Replicas)
  • Front-End: Cache Strategies You Should Know
  • Getting Started With Istio in AWS EKS for Multicluster Setup
  • Strategies for Reducing Total Cost of Ownership (TCO) For Integration Solutions

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: