Using Websockets with ArcGIS Streaming layer

AppStudio supports WebSockets!! So you can create awesome apps that make use of the light weight connection pattern inside of your native apps. Here is a code sample of how to use WebSockets to consume the ArcGIS Streaming Service which has the ws:// endpoints.

Video: https://youtu.be/clzNfbtZ9ko

//------------------------------------------------------------------------------
// WebSocketsDemo.qml
// Created 2015-04-29 15:41:59
//------------------------------------------------------------------------------

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtPositioning 5.3

import ArcGIS.AppFramework 1.0
import ArcGIS.AppFramework.Controls 1.0
import ArcGIS.AppFramework.Runtime 1.0
import ArcGIS.AppFramework.Runtime.Controls 1.0

import QtWebSockets 1.0

App {
    id: app
    width: 800
    height: 532

    WebSocket {
        id: socket
        //url: "ws://echo.websocket.org"
        url: "ws://geoeventsample3.esri.com:8080/arcgis/ws/services/SeattleBus/StreamServer/subscribe"

        onTextMessageReceived: {
            console.log(message);
            var graphic =  ArcGISRuntime.createObject("Graphic");
            graphic.json = JSON.parse(message);
            graphic.geometry = graphic.geometry.project(map.spatialReference);
            graphicsLayer.addGraphic(graphic);
            messageBox.text = "Graphics: " + graphicsLayer.numberOfGraphics
        }

        onStatusChanged: {
            console.log("Socket status: ", socket.status)
            if (socket.status == WebSocket.Error) {
                console.log("Error: " + socket.errorString)
            } else if (socket.status == WebSocket.Open) {
                socket.sendTextMessage("Hello World")
            } else if (socket.status == WebSocket.Closed) {
                messageBox.text = "Socket closed"
            }
        }
        active: false
    }


    Map {
        id: map
        anchors.fill: parent
        //visible: false

        SimpleRenderer {
            id: simpleRenderer
            symbol: SimpleMarkerSymbol {
                color: "#88165F8C"
                size: 10
                style: Enums.SimpleMarkerSymbolStyleCircle
            }
        }

        Envelope{
            id: initialExtent
            xMin: -13636752.523930544
            yMin: 6032518.527246365
            xMax: -13600062.75035371
            yMax: 6050767.8677494265
            spatialReference: SpatialReference {
                wkid: 102100
            }
        }

            Rectangle {
                anchors {
                    top: parent.top
                    left: parent.left
                }

                clip: true

                width: parent.width
                height: 30

                color: "white"

                Text {
                    anchors.fill: parent
                    anchors.margins: 10
                    anchors.verticalCenter: parent.verticalCenter
                    id: messageBox
                    text: socket.status == WebSocket.Open ? qsTr("Sending...") : qsTr("Ready!")
                    anchors.centerIn: parent
                    wrapMode: Text.WrapAnywhere
                }

                Button {
                    id:button
                    text: socket.active ? "Stop" : "Start"
                    anchors {
                        right: parent.right
                    }
                    onClicked: {
                        socket.active = !socket.active
                    }
                }
            }

            onStatusChanged: {
                if(status === Enums.MapStatusReady) {
                    map.extent = initialExtent;
                }
            }


            wrapAroundEnabled: true
            rotationByPinchingEnabled: true
            magnifierOnPressAndHoldEnabled: true
            mapPanningByMagnifierEnabled: true
            zoomByPinchingEnabled: true

            positionDisplay {
                positionSource: PositionSource {
                }
            }

            ArcGISTiledMapServiceLayer {
                url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
            }

            GraphicsLayer {
                id: graphicsLayer
                renderer:simpleRenderer
            }

            NorthArrow {
                anchors {
                    right: parent.right
                    top: parent.top
                    margins: 10
                }

                visible: map.mapRotation != 0
            }

            ZoomButtons {
                anchors {
                    right: parent.right
                    verticalCenter: parent.verticalCenter
                    margins: 10
                }
            }
        }
    }