Qt 5.9 | Qt WebChannel | Qt WebChannel Standalone Example | index.html Example File

Qt 5.9.3 Reference Documentation

# index.html Example File

standalone/index.html

      <!DOCTYPE html>
      <html>
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <script type="text/javascript" src="./qwebchannel.js"></script>
              <script type="text/javascript">
                  //BEGIN SETUP
                  function output(message) {
                      var output = document.getElementById("output");
                      output.innerHTML = output.innerHTML + message + "\n";
                  }
                  window.onload = function() {
                      if (location.search != "")
                          var baseUrl = (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/\.]+)/.exec(location.search)[1]);
                      else
                          var baseUrl = "ws://localhost:12345";

                      output("Connecting to WebSocket server at " + baseUrl + ".");
                      var socket = new WebSocket(baseUrl);

                      socket.onclose = function() {
                          console.error("web channel closed");
                      };
                      socket.onerror = function(error) {
                          console.error("web channel error: " + error);
                      };
                      socket.onopen = function() {
                          output("WebSocket connected, setting up QWebChannel.");
                          new QWebChannel(socket, function(channel) {
                              // make core object accessible globally
                              window.core = channel.objects.core;

                              document.getElementById("send").onclick = function() {
                                  var input = document.getElementById("input");
                                  var text = input.value;
                                  if (!text) {
                                      return;
                                  }

                                  output("Sent message: " + text);
                                  input.value = "";
                                  core.receiveText(text);
                              }

                              core.sendText.connect(function(message) {
                                  output("Received message: " + message);
                              });

                              core.receiveText("Client connected, ready to send/receive messages!");
                              output("Connected to WebChannel, ready to send/receive messages!");
                          });
                      }
                  }
                  //END SETUP
              </script>
              <style type="text/css">
                  html {
                      height: 100%;
                      width: 100%;
                  }
                  #input {
                      width: 400px;
                      margin: 0 10px 0 0;
                  }
                  #send {
                      width: 90px;
                      margin: 0;
                  }
                  #output {
                      width: 500px;
                      height: 300px;
                  }
              </style>
          </head>
          <body>
              <textarea id="output"></textarea><br />
              <input id="input" /><input type="submit" id="send" value="Send" onclick="javascript:click();" />
          </body>
      </html>