Created
November 21, 2014 00:35
-
-
Save ricma/f14a93c4a32b6544de1c to your computer and use it in GitHub Desktop.
Example Websocket usage with Sapui5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> | |
| <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" | |
| id="sap-ui-bootstrap" | |
| data-sap-ui-libs="sap.ui.commons,sap.ui.table" | |
| data-sap-ui-theme="sap_bluecrystal" | |
| type="text/javascript"> | |
| </script> | |
| <script type="text/javascript" | |
| src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"> | |
| </script> | |
| <script type="text/javascript"> | |
| "use strict"; | |
| var oModel = new sap.ui.model.json.JSONModel({ | |
| some: [ | |
| { key: "1", value: "Berlin" }, | |
| { key: "2", value: "Hamburg" } ]}); | |
| // mock a web socket locally | |
| var mockWs; | |
| function mockWSock() { | |
| var self = this, | |
| count = oModel.getProperty("/some").length + 1; | |
| console.log("message: " + count); | |
| mockWs.dispatchEvent( | |
| new MessageEvent( | |
| "message", { | |
| data: JSON.stringify({ | |
| key: count, | |
| value: count})})); | |
| // call the next time after 3000ms | |
| if (count < 14) { | |
| _.delay( mockWSock, 3000 ); | |
| } | |
| } | |
| // unfortunately only works in Chrome | |
| mockWs = new WebSocket("ws://mockWs"); | |
| mockWs.onmessage = function(event) { | |
| // retrieve the message and put it into a JSONModel | |
| var jsonData = JSON.parse(event.data); | |
| oModel.setProperty("/some", | |
| jQuery.merge([jsonData], oModel.getProperty("/some"))); | |
| oModel.refresh(/* force */ true); | |
| }; | |
| var oComboBox = new sap.ui.commons.ComboBox({ | |
| items: { | |
| path: "r>some", | |
| template: new sap.ui.core.ListItem({ | |
| key: "{r>key}", | |
| text: "{r>value}"})}}). | |
| setModel(oModel, "r"). | |
| bindElement("r>/"). | |
| placeAt("content"); | |
| $(function() { | |
| // start the mocking | |
| mockWSock(); | |
| }); | |
| </script> | |
| </head> | |
| <body class="sapUiBody"> | |
| <div id="content"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
sas