PageRenderTime 43ms CodeModel.GetById 19ms RepoModel.GetById 0ms app.codeStats 0ms

/src/websocketpp_02/examples/wsperf/wsperf_commander.html

https://gitlab.com/vectorci/rippled
HTML | 387 lines | 304 code | 81 blank | 2 comment | 0 complexity | 25e4431fcedae3ce363e37cabfb342b4 MD5 | raw file
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]-->
  5. <script language="javascript" type="text/javascript" src="vendor/jquery.min.js"></script>
  6. <script language="javascript" type="text/javascript" src="vendor/underscore.js"></script>
  7. <script language="javascript" type="text/javascript" src="vendor/backbone.js"></script>
  8. <script language="javascript" type="text/javascript" src="vendor/backbone-localstorage.js"></script>
  9. </head>
  10. <body>
  11. <script type="text/javascript">
  12. var ws;
  13. var url;
  14. var tests = {"9.1.1":1,"9.1.2":2,"9.1.3":3,"9.1.4":4,"9.1.5":5,"9.1.6":6};
  15. var d2 = [["9.1.1",6021],["9.1.2",22146]];
  16. var raw = {};
  17. var d = [{data:[[0,6021],[2,22146]], label:"Autobahn",bars: { show: true }},{label:"WebSocket++",bars: { show: true },data:[[1,5243],[3,20042]]}];
  18. var ws;
  19. function connect() {
  20. url = wsperf.get('server');
  21. if ("WebSocket" in window) {
  22. ws = new WebSocket(url);
  23. } else if ("MozWebSocket" in window) {
  24. ws = new MozWebSocket(url);
  25. } else {
  26. document.getElementById("messages").innerHTML += "This Browser does not support WebSockets<br />";
  27. return;
  28. }
  29. ws.onopen = function(e) {
  30. console.log("Client: A connection to "+ws.URL+" has been opened.");
  31. wsperf.set('connected',true);
  32. };
  33. ws.onerror = function(e) {
  34. document.getElementById("messages").innerHTML += "Client: An error occured, see console log for more details.<br />";
  35. console.log(e);
  36. wsperf.set('connected',false);
  37. };
  38. ws.onclose = function(e) {
  39. console.log("Client: The connection to "+url+" was closed.");
  40. wsperf.set('connected',false);
  41. };
  42. ws.onmessage = function(e) {
  43. console.log(e.data);
  44. data = JSON.parse(e.data);
  45. if (data.type == "message") {
  46. console.log("Server: "+data.data);
  47. } else {
  48. if (raw[data.target] === undefined) {
  49. raw[data.target] = [data.data];
  50. } else {
  51. raw[data.target].push(data.data);
  52. }
  53. process();
  54. }
  55. };
  56. }
  57. function disconnect() {
  58. ws.close();
  59. }
  60. function send() {
  61. if (ws === undefined || ws.readyState != 1) {
  62. document.getElementById("messages").innerHTML += "Client: Websocket is not avaliable for writing<br />";
  63. return;
  64. }
  65. ws.send(document.getElementById("msg").value);
  66. }
  67. function process() {
  68. d = [];
  69. k = 0;
  70. for (i in raw) {
  71. o = {};
  72. o.label = i;
  73. o.bars = {show: true}
  74. o.data = [];
  75. for (j in raw[i]) {
  76. p = [k++,raw[i][j].microseconds];
  77. o.data.push(p);
  78. }
  79. d.push(o);
  80. }
  81. $.plot($("#placeholder"), d, {xaxis:[{tickFormatter: euroFormatter}]});
  82. }
  83. function euroFormatter(v, axis) {
  84. return tests[v];
  85. }
  86. $(function () {
  87. //$.plot($("#placeholder"), d, {xaxis:[{tickFormatter: euroFormatter}]});
  88. window.WSPerf = Backbone.Model.extend({
  89. defaults: function() {
  90. return {server:"ws://localhost:9003",connected:false};
  91. }
  92. });
  93. window.Server = Backbone.Model.extend({
  94. defaults: function() {
  95. return {enabled:true};
  96. }
  97. });
  98. window.ServerList = Backbone.Collection.extend({
  99. model: Server,
  100. localStorage: new Store("wsperf_servers"),
  101. });
  102. window.Servers = new ServerList;
  103. window.wsperf = new WSPerf;
  104. window.ServerView = Backbone.View.extend({
  105. tagName: "tr",
  106. template: _.template($('#server-template').html()),
  107. events: {
  108. "click td.clear" : "clear",
  109. "click td.server-enabled input" : "toggle_enabled"
  110. },
  111. initialize: function() {
  112. this.model.bind('change', this.render, this);
  113. this.model.bind('destroy', this.remove, this);
  114. },
  115. render: function() {
  116. $(this.el).html(this.template(this.model.toJSON()));
  117. this.setText();
  118. return this;
  119. },
  120. setText: function() {
  121. var ua = this.model.get('ua');
  122. var uri = this.model.get('uri');
  123. this.$('.server-ua').text(ua);
  124. this.$('.server-uri').text(uri);
  125. },
  126. remove: function() {
  127. console.log("remove");
  128. $(this.el).remove();
  129. },
  130. clear: function() {
  131. console.log("destroy");
  132. this.model.destroy();
  133. },
  134. toggle_enabled: function() {
  135. this.model.set('enabled',!this.model.get('enabled'));
  136. }
  137. });
  138. window.WSPerfSettingsView = Backbone.View.extend({
  139. tagName: "div",
  140. template: _.template($('#settings-template').html()),
  141. events: {
  142. "click #add-target-server": "addTargetServer",
  143. "click #target-server-table .clear-all": "clearAll",
  144. "click #toggle_connect": "toggle_connect"
  145. },
  146. initialize: function() {
  147. //this.model.bind('change', this.render, this);
  148. //this.model.bind('destroy', this.remove, this);
  149. wsperf.bind('change', this.render, this);
  150. Servers.bind('add', this.addOne, this);
  151. Servers.bind('reset', this.addAll, this);
  152. Servers.bind('all', this.render, this);
  153. },
  154. render: function() {
  155. $(this.el).html(this.template(wsperf.toJSON()));
  156. this.inputua = this.$("#add-target-server-ua");
  157. this.inputuri = this.$("#add-target-server-uri");
  158. this.addAll();
  159. return this;
  160. },
  161. addOne: function(server) {
  162. var view = new ServerView({model: server});
  163. $("#target-server-list").append(view.render().el);
  164. },
  165. addAll: function() {
  166. Servers.each(this.addOne);
  167. },
  168. addTargetServer: function() {
  169. var ua = this.inputua.val();
  170. var uri = this.inputuri.val();
  171. console.log("bar "+ua+" "+uri);
  172. if (!ua || !uri) {
  173. return;
  174. }
  175. Servers.create({ua: ua, uri: uri});
  176. this.inputua.val('');
  177. this.inputuri.val('');
  178. },
  179. clearAll: function() {
  180. console.log("foo");
  181. Servers.each(function(server) {server.destroy(); });
  182. return false;
  183. },
  184. toggle_connect: function() {
  185. if (wsperf.get('connected')) {
  186. disconnect();
  187. } else {
  188. connect();
  189. }
  190. }
  191. });
  192. window.WSPerfDataView = Backbone.View.extend({
  193. tagName: "div",
  194. template: _.template($('#data-template').html()),
  195. events: {
  196. //"click td.clear" : "clear"
  197. },
  198. initialize: function() {
  199. //this.model.bind('change', this.render, this);
  200. //this.model.bind('destroy', this.remove, this);
  201. },
  202. render: function() {
  203. $(this.el).html(this.template());
  204. return this;
  205. },
  206. });
  207. /*window.WSPerfCommanderView = Backbone.View.extend({
  208. el: $("#wsperf-commander"),
  209. events: {
  210. //"click #add-target-server": "addTargetServer",
  211. //"click #target-server-table .clear-all": "clearAll",
  212. //"click #menu-server-settings": "renderServerSettings",
  213. //"click #menu-server-settings": "renderServerSettings",
  214. //"click #menu-server-settings": "renderServerSettings",
  215. },
  216. initialize: function() {
  217. Servers.fetch();
  218. },
  219. render: function() {},
  220. });*/
  221. var WSPerfCommanderRouter = Backbone.Router.extend({
  222. initialize: function() {
  223. Servers.fetch();
  224. settingsView = new WSPerfSettingsView({el: "#content"});
  225. dataView = new WSPerfDataView({el: "#content"});
  226. },
  227. routes: {
  228. "/settings": "settings",
  229. "/data": "data",
  230. "*actions": "defaultRoute"
  231. },
  232. defaultRoute: function( actions ) {
  233. console.log(actions);
  234. },
  235. settings: function() {
  236. settingsView.render();
  237. },
  238. data: function() {
  239. dataView.render();
  240. }
  241. });
  242. var app_router = new WSPerfCommanderRouter;
  243. Backbone.history.start();
  244. //window.App = new WSPerfCommanderView;
  245. });
  246. </script>
  247. <style>
  248. body,html {
  249. margin: 0px;
  250. padding: 0px;
  251. }
  252. #controls {
  253. float:left;
  254. width:200px;
  255. background-color: #999;
  256. }
  257. #content {
  258. margin-left: 200px;
  259. }
  260. </style>
  261. <div id="wsperf-commander">
  262. <div id="controls">
  263. <ul>
  264. <li id="menu-server-settings"><a href="#/settings">Server Settings</a></li>
  265. <li id="menu-data-table"><a href="#/data">Data Table</a></li>
  266. <li id="menu-charts"><a href="#action">Charts</a></li>
  267. </ul>
  268. <div id="message_input"><input type="text" name="msg" id="msg" value="ws://localhost:9004" />
  269. <button onclick="send();">Send</button></div>
  270. </div>
  271. <div id="content">
  272. <div id="placeholder" style="width:600px;height:300px"></div>
  273. <div id="messages"></div>
  274. </div>
  275. </div>
  276. <!-- Templates -->
  277. <script type="text/template" id="server-template">
  278. <td class="server-enabled"><input type="checkbox" <%= (enabled ? "checked" : "") %> /></td>
  279. <td class="server-ua"><%= ua %></td>
  280. <td class="server-uri"><%= uri %></td>
  281. <td class="clear">X</td>
  282. </script>
  283. <script type="text/template" id="settings-template">
  284. <h2>wsperf Server</h2>
  285. <div id="server">
  286. <input type="text" name="server_url" id="server_url" value="<%= server %>" <%= (connected ? "disabled" : "") %> />
  287. <button id="toggle_connect"><%= (connected ? "Disconnect" : "Connect") %></button>
  288. </div>
  289. <h2>Target Servers</h2>
  290. <table id="target-server-table">
  291. <thead>
  292. <th>Enabled</th><th>User Agent</th><th>URI</th><th class="clear-all">Remove</th>
  293. </thead>
  294. <tbody id="target-server-list"></tbody>
  295. </table>
  296. <div>
  297. User Agent: <input type="text" id="add-target-server-ua" /><br />
  298. URI: <input type="text" id="add-target-server-uri" /><br />
  299. <button id="add-target-server">Add Target Server</button>
  300. </div>
  301. </script>
  302. <script type="text/template" id="data-template">
  303. <div>data</div>
  304. </script>
  305. </body>
  306. </html>