Getting started with the MQTT messaging client for JavaScript

You can get started with the MQTT messaging client for JavaScript by displaying the messaging client sample home page, and browsing the resources to which it links. To display this home page, you configure an MQTT server to accept connections from the MQTT messaging client sample JavaScript pages, then you type the URL that you have configured on the server into a web browser. The MQTT messaging client for JavaScript automatically starts on your device, and the messaging client sample home page is displayed. This page contains links to utilities, programming interface documentation, a tutorial, and other useful information.

Before you begin

For advanced use, or use in production, you will want to reshape or remove the messaging client sample home page. Please note that user interfaces resulting from the sample code are not warranted to be compliant to any accessibility standards or accessibility requirements.

You need an MQTT server to support the MQTT messaging client for JavaScript. This server must support the MQTT V3.1 protocol over WebSockets. IBM® MessageSight, and IBM WebSphere® MQ Version 7.5.0, Fix Pack 1 and later versions, support the MQTT protocol over WebSockets. See Getting started with MQTT servers. To install IBM WebSphere MQ for a free 90-day evaluation, see Installing IBM WebSphere MQ.

The WebSocket protocol is recently established. If there is a firewall between your client and the server, check that it does not block WebSockets traffic. Similarly, if your browser does not yet support the WebSocket protocol¹ you won't be able to use the client utility or the tutorials that are available from the messaging client sample home page. The Table 1 table lists the browsers whose most recent versions have been tested and shown to work with the messaging client.

Table 1. Supported browsers for use with the MQTT messaging client for JavaScript
Android	iOS	Linux	Windows
Firefox for Android 19.0 and later Chrome for Android 25.0 and later	Safari 6.0 and later Chrome 14.0 and later	Firefox 6.0 and later Chrome 14.0 and later	Firefox 6.0 and later Chrome 14.0 and later

About this task

Most of the steps in this task are to configure the MQTT server. All that is required to access the messaging client for JavaScript is to run a browser that supports the WebSocket protocol.

On IBM WebSphere MQ, follow the steps to enable IBM WebSphere MQ Telemetry by creating the sample channels. Connect to the sample default MQTT WebSockets channel on port 1883. The messaging client sample home page URL is http://hostname:1883 on IBM WebSphere MQ.

On IBM MessageSight, install and set up the appliance, configure the messaging hub to accept connections, and create an MQTT WebSockets endpoint.

Procedure

Download the Mobile Messaging and M2M Client Pack, and choose an MQTT server to which you can connect the client app.
See Getting started with MQTT clients.
Configure your MQTT server to accept connections from the MQTT messaging client for JavaScript sample HTML pages.
- On IBM WebSphere MQ:
  - If you already have a IBM WebSphere MQ queue manager that is configured for MQTT, alter the protocol in the channel definition to support both MQTT and HTTP. See ALTER CHANNEL.
  - To create an IBM WebSphere MQ queue manager and configure the sample MQTT WebSockets endpoint, complete either of the following tasks:
    - Configuring the MQTT service from the command line
    - Configuring the MQTT service with IBM WebSphere MQ Explorer
Open a web browser on your device.
Type the URL of the messaging client sample home page.
- On IBM WebSphere MQ, this is http://hostname:1883
- On IBM MessageSight, this is http://hostname:port
  where hostname is the DNS name or IP address of the Ethernet socket that you configured on your IBM MessageSight appliance as the endpoint to which the client is to connect, and port is the TCP/IP port number you assigned to the endpoint for the client.
The messaging client sample home page is displayed.

Figure 1. MQTT messaging client for JavaScript sample home page

Results

You have configured an MQTT channel for WebSockets.

In the sample home page of the MQTT messaging client for JavaScript, click Web Messaging Utility to try out different functions in the messaging client API. For example, you can connect to the queue manager, subscribe for messages, then publish some messages. You can also click Web Messaging Tutorial to learn how to create a web page that calls the MQTT messaging client for JavaScript API.

¹ Specifically, if it does not support the RFC 6455 (WebSocket) standard.