github.com/gogf/gf@v1.16.9/.example/net/ghttp/server/websocket/echo/index.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  <head>
     4      <title>gf websocket echo server</title>
     5      <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
     6      <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
     7  </head>
     8  <body>
     9  <div class="container">
    10      <div class="list-group" id="divShow"></div>
    11      <div>
    12          <div><input class="form-control" id="txtContent" autofocus rows="6" placeholder="请输入发送内容"></div>
    13          <div><button class="btn btn-default" id="btnSend" style="margin-top:15px">发 送</button></div>
    14      </div>
    15  </div>
    16  </body>
    17  </html>
    18  
    19  <script type="application/javascript">
    20      // 显示提示信息
    21      function showInfo(content) {
    22          $("<div class=\"list-group-item list-group-item-info\">" + content + "</div>").appendTo("#divShow")
    23      }
    24      // 显示警告信息
    25      function showWaring(content) {
    26          $("<div class=\"list-group-item list-group-item-warning\">" + content + "</div>").appendTo("#divShow")
    27      }
    28      // 显示成功信息
    29      function showSuccess(content) {
    30          $("<div class=\"list-group-item list-group-item-success\">" + content + "</div>").appendTo("#divShow")
    31      }
    32      // 显示错误信息
    33      function showError(content) {
    34          $("<div class=\"list-group-item list-group-item-danger\">" + content + "</div>").appendTo("#divShow")
    35      }
    36  
    37      $(function () {
    38          var url = "ws://127.0.0.1:8199/ws";
    39          var ws  = new WebSocket(url);
    40          try {
    41              // ws连接成功
    42              ws.onopen = function () {
    43                  showInfo("WebSocket Server [" + url +"] 连接成功！");
    44              };
    45              // ws连接关闭
    46              ws.onclose = function () {
    47                  if (ws) {
    48                      ws.close();
    49                      ws = null;
    50                  }
    51                  showError("WebSocket Server [" + url +"] 连接关闭！");
    52              };
    53              // ws连接错误
    54              ws.onerror = function () {
    55                  if (ws) {
    56                      ws.close();
    57                      ws = null;
    58                  }
    59                  showError("WebSocket Server [" + url +"] 连接关闭！");
    60              };
    61              // ws数据返回处理
    62              ws.onmessage = function (result) {
    63                  showWaring(" > " + result.data);
    64              };
    65          } catch (e) {
    66              alert(e.message);
    67          }
    68  
    69          // 按钮点击发送数据
    70          $("#btnSend").on("click", function () {
    71              if (ws == null) {
    72                  showError("WebSocket Server [" + url +"] 连接失败，请F5刷新页面!");
    73                  return;
    74              }
    75              var content = $.trim($("#txtContent").val()).replace("/[\n]/g", "");
    76              if (content.length <= 0) {
    77                  alert("请输入发送内容!");
    78                  return;
    79              }
    80              $("#txtContent").val("")
    81              showSuccess(content);
    82              ws.send(content);
    83          });
    84  
    85          // 回车按钮触发发送点击事件
    86          $("#txtContent").on("keydown", function (event) {
    87              if (event.keyCode == 13) {
    88                  $("#btnSend").trigger("click");
    89              }
    90          });
    91      })
    92  
    93  </script>