JS implémente des invites de message en temps réel Websocket

Cet article présente principalement les informations pertinentes sur l'effet de la mise en œuvre par JS des invites de messages en temps réel à interrogation longue de Websocket. J'espère que cela pourra aider tout le monde.

Le rendu est le suivant :

Le code de référence est le suivant :

code jsp :

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<p class="page-header navbar navbar-fixed-top">
  <p class="page-header-inner">
    <p class="page-logo">
      <a href="<c:url value=" rel="external nofollow" rel="external nofollow" /"/>"><img
        src="<c:url value="/img/logo.png"/>" style="height: 14px" alt="logo"
        class="logo-default" /></a>
      <p class="menu-toggler sidebar-toggler hide"></p>
    </p>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="menu-toggler responsive-toggler"
      data-toggle="collapse" data-target=".navbar-collapse"></a>
    <p class="top-menu">
      <ul class="nav navbar-nav pull-right">
        <li class="dropdown dropdown-alert"><a href="#" rel="external nofollow" rel="external nofollow" 
          class="dropdown-toggle" data-toggle="dropdown"
          data-hover="dropdown" data-close-others="true"> <span
            class="badge pull-left"></span><label class="hidden-sm">报警</label><i
            class="fa fa-bell"></i>
        </a>
          <ul class="dropdown-menu">
          </ul></li>
        <li class="dropdown dropdown-user"><a href="#" rel="external nofollow" rel="external nofollow" 
          class="dropdown-toggle" data-toggle="dropdown"
          data-hover="dropdown" data-close-others="true"> <span
            class="username username-hide-on-mobile">你好，${sessionScope.username}</span>
            <i class="fa fa-angle-down"></i>
        </a>
          <ul class="dropdown-menu">
            <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" id="updatePass"><i
                class="icon-lock"></i>修改密码</a></li>
            <li><a href="<c:url value=" rel="external nofollow" rel="external nofollow" /logout"/> "><i
                class="icon-key"></i>退出登录</a></li>
          </ul></li>
      </ul>
    </p>
  </p>
</p>
<p class="clearfix"></p>
<script>
  //toastr.sos(num1)
</script>
<script type="text/javascript"
  src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"
  src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.js"></script>
<script type="text/javascript">
  function wsPath() {
    var pathName = window.document.location.pathname;
    var host = window.location.host;
    var projectName = pathName.substring(0,
        pathName.substr(1).indexOf(&#39;/&#39;) + 1);
    return (host + projectName);
  }
  wsPath = wsPath();
  var websocket = null;
  if (&#39;WebSocket&#39; in window) {
    websocket = new WebSocket("ws://" + wsPath + "/websocket/socketServer");
  } else if (&#39;MozWebSocket&#39; in window) {
    websocket = new MozWebSocket("ws://" + wsPath
        + "/bison/websocket/socketServer");
  } else {
    websocket = new SockJS("http://" + wsPath
        + "/bison/sockjs/socketServer");
  }
  websocket.onmessage = onMessage;
  websocket.onope = onOpen;
  websocket.onerror = onError;
  websocket.onclose = onClose;
  function onOpen() {
  }
  function onMessage(evt) {
    var $uncheckedAlertMenuBtn = $("a.dropdown-toggle", $uncheckedAlertMenu);
    var $uncheckedAlertBadge = $("span.badge", $uncheckedAlertMenuBtn);
    var $uncheckedAlertMenu = $(&#39;li.dropdown-alert&#39;);
    var $uncheckedAlertList = $(&#39;ul&#39;, $uncheckedAlertMenu);
    var a = $uncheckedAlertBadge.html();
    $uncheckedAlertBadge.html(Number(a) + 1);
    //判断报警类型 如果是位置偏移，place+1
    if (evt.data == "1") {
      var count;
      var a = $("#number").html();
      if (a == null) {
        count = 1;
        $uncheckedAlertList
            .prepend(&#39;<li class="place-alert"><a href="alert?menuId=274" rel="external nofollow" rel="external nofollow" > <font color="red" id="place-alert">&#39;
                + "位置报警(<font id =&#39;number&#39;>"
                + count
                + "</font>)" + &#39;</font></a></li>&#39;);
      } else {
        count = Number(a) + 1;
        $("#place-alert").html(
            "位置偏移(<font id=&#39;number&#39;>" + count + "</font>)");
      }
    }
    if (evt.data == "0") {
      var count;
      var a = $("#snum").html();
      if (a == null) {
        count = 1;
        $uncheckedAlertList
            .prepend(&#39;<li class="sos-alert"> <a href="alert?menuId=274" rel="external nofollow" rel="external nofollow" ><font color="red" id="sos-alert">&#39;
                + "SOS报警(<font id=&#39;snum&#39;>"
                + count
                + ")</font>"
                + &#39;</font></a></li>&#39;);
      } else {
        count = Number(a) + 1;
        $("#sos-alert").html(
            "SOS报警(<font id=&#39;snum&#39;>" + count + "</font>)");
      }
    }
  }
  function onError() {
    websocket.close();
  }
  function onClose() {
  }
  window.close = function() {
    websocket.onclose();
  }
</script>

Recommandations associées :

Introduction détaillée à WebSocket

Introduction détaillée à websocket en php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!