GUIDES WebSocket Overview
About
Binary Data
Captive Portal
DNS
DNS Service Discovery
EventSource
Files
HTTP
HTTP Server
Implementing ECMA-419 Modules
Key-Value Storage
Logging
MQTT
Optimizing Embedded JavaScript
Streams
Time
Time Callbacks
Transport Layer Security (TLS)
WebSocket
WebSocket Server
Wi-Fi
Wi-Fi Access Point
Overview
Connect to Server using WebSocket()
Connect Securely to Server using WebSocket()
Close Connection using WebSocket()
Send Message using WebSocket()
Receive Message using WebSocket()
Get Connection Information using WebSocket()
Connect to Server using WebSocket Client
Connect Securely to Server using WebSocket Client
Close Connection using WebSocket Client
Send Message using WebSocket Client
Receive Message using WebSocket Client
Control Messages using WebSocket Client
Connect to Server using WebSocketStream
Connect Securely to Server using WebSocketStream
Close Connection using WebSocketStream
Send Message using WebSocketStream
Receive Message using WebSocketStream
Moddable SDK 9.5.0
About
Binary Data
Overview
Convert String to ArrayBuffer
Convert ArrayBuffer to String
Convert ArrayBuffers to String
Handle Errors Converting ArrayBuffer to String
Immutable ArrayBuffers
Resize an ArrayBuffer
Combine ArrayBuffers
Convert Base64 to Binary Data
Convert Binary Data to Base64
Convert Binary Data to Hex
Convert Hex to Binary Data
Calculate CRC for Binary Data
Compress Binary Data – One Buffer
Compress Binary Data – Streaming
Decompress Binary Data – One Buffer
Decompress Binary Data – Streaming
Captive Portal
Overview
Create Captive Portal
Close Captive Portal
Provide Web Pages for Captive Portal
Get Information from Captive Portal
DNS
Overview
Resolve Name
Resolve Multiple Names
DNS Service Discovery
Overview
Claim Local Name
Advertise Services
Discover Services
EventSource
Overview
Connect
Connect Securely
Close
Receive
Connection Information
Files
Overview
Create, Open, and Close File
Read File
Write File
Delete File
Get File Information
Create Directory
Enumerate Directory
Delete Directory
Open Directory
HTTP
Overview
Make Request using fetch()
Make Secure Request using fetch()
Send Request Headers using fetch()
Receive Response Headers using fetch()
Send Request Body using fetch()
Make Request using HTTP Client
Make Secure Request using HTTP Client
Send Request Headers using HTTP Client
Receive Response Headers using HTTP Client
Send Request Body using HTTP Client
HTTP Server
Overview
Create Server
Route Request
Respond to Request
Respond to Request with File
Receive Request Body
Receive Request Body to File
Implementing ECMA-419 Modules
Overview
Constructor Sets target
Constructor IO
Constructor Clean-up on Failure
close() and [Symbol.dispose]
Calling Callbacks
Setting Options with configure()
Keep Instance Surface Clean
Key-Value Storage
Overview
Read and Write Values using Web Storage
Delete Keys using Web Storage
Enumerate Keys using Web Storage
Read and Write Values using Key-Value Pair
Change Data Formats using Key-Value Pair
Delete Keys using Key-Value Pair
Enumerate Keys using Key-Value Pair
Logging
Overview
Logging with Console
Logging with trace()
MQTT
Overview
Connect to MQTT Server using MQTT()
Connect Securely to MQTT Server using MQTT()
Close Connection using MQTT()
Publish Message using MQTT()
Subscribe to Topic using MQTT()
Receive Messages using MQTT()
Get Connection Information using MQTT()
Connect to MQTT Server using MQTT Client
Connect Securely to MQTT Server using MQTT Client
Close Connection using MQTT Client
Publish Message using MQTT Client
Subscribe to Topic using MQTT Client
Receive Messages using MQTT Client
Optimizing Embedded JavaScript
Overview
When to Optimize
Know Where to Optimize
Loop through an Array
Iterate Over a String
Build a String
Avoid Copying Buffers
Accessing Properties
Map versus Object
Append to an Array
Operate on Bits
Define Class Methods
Streams
Overview
Time
Overview
Get Unix Time
Get Time of Day
Get Date
Get Time Since System Start
Get Microseconds
Set System Date and Time
How Time and Timezone are Initialized
Get Time and Date from Real-Time Clock
Set Real-Time Clock Time
Get Time and Date from Network
Sleep
Time Callbacks
Overview
One-Time Callback
Repeating Callback
Repeating Callback with Initial Delay
Immediate Callback
Reschedule Callback
Cancel Callback
Suspend Callback
Transport Layer Security (TLS)
Overview
Include Public Certificates
Include Private Certificates
Diagnostics
DER and PEM Certificates
WebSocket
Overview
Connect to Server using WebSocket()
Connect Securely to Server using WebSocket()
Close Connection using WebSocket()
Send Message using WebSocket()
Receive Message using WebSocket()
Get Connection Information using WebSocket()
Connect to Server using WebSocket Client
Connect Securely to Server using WebSocket Client
Close Connection using WebSocket Client
Send Message using WebSocket Client
Receive Message using WebSocket Client
Control Messages using WebSocket Client
Connect to Server using WebSocketStream
Connect Securely to Server using WebSocketStream
Close Connection using WebSocketStream
Send Message using WebSocketStream
Receive Message using WebSocketStream
WebSocket Server
Overview
Create WebSocket Server Endpoint
Accept WebSocket Request
Wi-Fi
Overview
Scan for Access Points
Scan Continuously for Access Points
Connect
Reconnect Automatically
Disconnect
Get Connection Information
Use Static IP Address
Wi-Fi Access Point
Overview
Create Access Point
Close Access Point
Get Information
Manage Stations
DNS Redirect
Provide HTTP Server

The high-level web standard WebSocket() API and the low-level ECMA-419 embedded standard WebSocket Client APIs are both available to Embedded JavaScript developers using the Moddable SDK. In addition, the Web platform's experimental WebSocketStream() is available. Both WebSocket() and WebSocketStream() are implemented using WebSocket Client.

Using WebSocket()

Using ECMA-419 WebSocket Client

Using WebSocketStream()

How to Choose

If WebSocket() works for your project, you should use it. You can always start with WebSocket() and switch to WebSocket Client later. With WebSocket() you'll usually write less code. Because WebSocket() is a well-known web standard, many developers are already familiar with it.

WebSocketStream() is built on streams, part of the modern Web platform. This simplifies composing data flows. WebSocketStream() also addresses a fundamental problem with WebSocket(), the lack of support for backpressure, which can lead to memory and buffering problems. For low throughput connections, the lack of backpressure support is not usually an issue.

Situations where WebSocket() and WebSocketStream() might not be the best choice include when resources like RAM and ROM are very constrained, when you have large messages, and when you need precise control over the buffering of messages.

Using WebSocket Client requires more code and a deeper understanding of the WebSocket protocol. But, it offers real advantages:

  • Lower runtime overhead
  • Send and receive messages of unlimited size
  • Send and receive control messages
  • Smaller firmware size

Building with mcconfig

Include the WebSocket() manifest in your project's manifest.json:

$(MODDABLE)/examples/io/tcp/websocket/manifest_websocket.json

Then, import the module in your JavaScript source code:

import WebSocket from "WebSocket";

To use the WebSocket Client instead, include its manifest. Including the manifest initializes the host provider device.network.ws:

$(MODDABLE)/examples/io/tcp/websocketclient/manifest_websocketclient.json

For secure connections over WSS, include the secure WebSocket Client manifest instead. It initializes the host provider device.network.wss:

$(MODDABLE)/examples/io/tcp/websocketsclient/manifest_wssclient.json

To use WebSocketStream(), include its manifest in your project's manifest.json.

$(MODDABLE)/modules/web/streams/websocket/manifest.json

Then, import the module in your JavaScript source code:

import WebSocketStream from "web/websocketstream";

Building with mcpack

If your project uses the WebSocket global, mcpack automatically includes the manifest and initializes the WebSocket global. If your project uses WebSocket in an import statement, its manifest is automatically included.

If your project accesses the WebSocket Client through device.network.ws or device.network.wss, mcpack includes the necessary manifests automatically.

If your project uses the WebSocketStream global, mcpack automatically includes the manifest and initializes the WebSocketStream global. If your project uses web/websocketstream in an import statement, its manifest is automatically included.

Learn More