From d646e3666fa2e39664ef300d89282d361a2d92f4 Mon Sep 17 00:00:00 2001
From: David Fowler <davidfowl@gmail.com>
Date: Sat, 1 Oct 2016 14:27:50 -0700
Subject: [PATCH] Made a thin websocket like wrapper around the client API

---
 samples/SocketsSample/wwwroot/polling.html | 74 +++++++++++++++-------
 samples/SocketsSample/wwwroot/sse.html     | 74 ++++++++++++++--------
 2 files changed, 99 insertions(+), 49 deletions(-)

diff --git a/samples/SocketsSample/wwwroot/polling.html b/samples/SocketsSample/wwwroot/polling.html
index 77d92aed9a..4a6d15831d 100644
--- a/samples/SocketsSample/wwwroot/polling.html
+++ b/samples/SocketsSample/wwwroot/polling.html
@@ -4,7 +4,9 @@
     <meta charset="utf-8" />
     <title></title>
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
+        function socket(url) {
+            var sock = this;
+            sock.url = url;
 
             function xhr(method, url) {
                 return new Promise((resolve, reject) => {
@@ -31,39 +33,63 @@
                 });
             }
 
-            function send(connectionId, data) {
-                var xhr = new XMLHttpRequest();
-                var url = `/chat/send?id=${connectionId}`;
-                xhr.open("POST", url, true);
-                xhr.onreadystatechange = function () {
-                    if (xhr.readyState == 4 && xhr.status == 200) {
-                    }
-                }
-                xhr.send(data);
-            }
-
-            function poll(connectionId, xhr) {
-                var url = `/chat/poll?id=${connectionId}`;
-                xhr.open("POST", url, true);
+            function poll(xhr) {
+                var url = `${sock.url}/poll?id=${sock.connectionId}`;
+                xhr.open('POST', url, true);
                 xhr.onreadystatechange = () => {
                     if (xhr.readyState == 4 && xhr.status == 200) {
-                        var child = document.createElement('li');
-                        child.innerText = xhr.response;
-                        document.getElementById('messages').appendChild(child);
-                        poll(connectionId, xhr);
+                        sock.onmessage(xhr.responseText);
+                        poll(xhr);
                     }
                 }
                 xhr.send(null);
             }
 
-            xhr('GET', '/chat/getid').then(connectionId => {
-                document.getElementById('sendmessage').addEventListener('click', () => {
-                    let data = document.getElementById('data').value;
-                    send(connectionId, data);
-                });
+            this.onopen = function () { };
+            this.onmessage = function () { };
+            this.onerror = function (evt) { };
+            this.send = function (data) {
+                if (!sock.connectionId) {
+                    throw "Not connected";
+                }
+
+                var xhr = new XMLHttpRequest();
+                var url = `${sock.url}/send?id=${sock.connectionId}`;
+                xhr.open('POST', url, true);
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState == 4 && xhr.status == 200) {
+                        // Do something useful here
+                    }
+                }
+                xhr.send(data);
+            };
+
+            xhr('GET', `${sock.url}/getid`).then(connectionId => {
+                sock.connectionId = connectionId;
+
+                sock.onopen();
 
                 poll(connectionId, new XMLHttpRequest());
             });
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            var sock = new socket('/chat');
+
+            sock.onopen = function () {
+                console.log('Opened!');
+            };
+
+            sock.onmessage = function (evt) {
+                var child = document.createElement('li');
+                child.innerText = evt.data;
+                document.getElementById('messages').appendChild(child);
+            };
+
+            document.getElementById('sendmessage').addEventListener('click', () => {
+                let data = document.getElementById('data').value;
+                sock.send(data);
+            });
         });
     </script>
 </head>
diff --git a/samples/SocketsSample/wwwroot/sse.html b/samples/SocketsSample/wwwroot/sse.html
index daa7847b32..75905f3f17 100644
--- a/samples/SocketsSample/wwwroot/sse.html
+++ b/samples/SocketsSample/wwwroot/sse.html
@@ -4,17 +4,9 @@
     <meta charset="utf-8" />
     <title></title>
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            function send(connectionId, data) {
-                var xhr = new XMLHttpRequest();
-                var url = `/chat/send?id=${connectionId}`;
-                xhr.open("POST", url, true);
-                xhr.onreadystatechange = function () {
-                    if (xhr.readyState == 4 && xhr.status == 200) {
-                    }
-                }
-                xhr.send(data);
-            }
+        function socket(url) {
+            var sock = this;
+            sock.url = url;
 
             function xhr(method, url) {
                 return new Promise((resolve, reject) => {
@@ -41,27 +33,61 @@
                 });
             }
 
-            xhr('GET', '/chat/getid').then(connectionId => {
-                let source = new EventSource(`/chat/sse?id=${connectionId}`);
+            this.onopen = function () { };
+            this.onmessage = function () { };
+            this.onerror = function (evt) { };
+            this.send = function (data) {
+                if (!sock.connectionId) {
+                    throw "Not connected";
+                }
+
+                var xhr = new XMLHttpRequest();
+                var url = `${sock.url}/send?id=${sock.connectionId}`;
+                xhr.open('POST', url, true);
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState == 4 && xhr.status == 200) {
+                    }
+                }
+                xhr.send(data);
+            };
+
+            // Start the connection
+            xhr('GET', `${sock.url}/getid`).then(connectionId => {
+                sock.connectionId = connectionId;
+
+                let source = new EventSource(`${sock.url}/sse?id=${connectionId}`);
 
                 source.onopen = function () {
-                    console.log('Opened!');
+                    sock.onopen();
                 };
 
                 source.onerror = function (err) {
-                    console.log('Error: ' + err.type);
+                    sock.onerror(err);
                 };
 
                 source.onmessage = function (data) {
-                    var child = document.createElement('li');
-                    child.innerText = data.data;
-                    document.getElementById('messages').appendChild(child);
+                    sock.onmessage(data);
                 };
+            });
+        };
 
-                document.getElementById('sendmessage').addEventListener('click', () => {
-                    let data = document.getElementById('data').value;
-                    send(connectionId, data);
-                });
+
+        document.addEventListener('DOMContentLoaded', () => {
+            var sock = new socket('/chat');
+
+            sock.onopen = function () {
+                console.log('Opened!');
+            };
+
+            sock.onmessage = function (evt) {
+                var child = document.createElement('li');
+                child.innerText = evt.data;
+                document.getElementById('messages').appendChild(child);
+            };
+
+            document.getElementById('sendmessage').addEventListener('click', () => {
+                let data = document.getElementById('data').value;
+                sock.send(data);
             });
         });
 
@@ -72,8 +98,6 @@
     <input type="text" id="data" />
     <input type="button" id="sendmessage" value="Send" />
 
-    <ul id="messages">
-
-    </ul>
+    <ul id="messages"></ul>
 </body>
 </html>
\ No newline at end of file