JS 는 웹 소켓 의 실시 간 메시지 알림 효 과 를 실현 합 니 다.
참조 코드 는 다음 과 같 습 니 다.
jsp 코드:
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<div class="page-header navbar navbar-fixed-top">
<div class="page-header-inner">
<div 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>
<div class="menu-toggler sidebar-toggler hide"></div>
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="menu-toggler responsive-toggler"
data-toggle="collapse" data-target=".navbar-collapse"></a>
<div 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>
</div>
</div>
</div>
<div class="clearfix"></div>
<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('/') + 1);
return (host + projectName);
}
wsPath = wsPath();
var websocket = null;
if ('WebSocket' in window) {
websocket = new WebSocket("ws://" + wsPath + "/websocket/socketServer");
} else if ('MozWebSocket' 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 = $('li.dropdown-alert');
var $uncheckedAlertList = $('ul', $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('<li class="place-alert"><a href="alert?menuId=274" rel="external nofollow" rel="external nofollow" > <font color="red" id="place-alert">'
+ " (<font id ='number'>"
+ count
+ "</font>)" + '</font></a></li>');
} else {
count = Number(a) + 1;
$("#place-alert").html(
" (<font id='number'>" + count + "</font>)");
}
}
if (evt.data == "0") {
var count;
var a = $("#snum").html();
if (a == null) {
count = 1;
$uncheckedAlertList
.prepend('<li class="sos-alert"> <a href="alert?menuId=274" rel="external nofollow" rel="external nofollow" ><font color="red" id="sos-alert">'
+ "SOS (<font id='snum'>"
+ count
+ ")</font>"
+ '</font></a></li>');
} else {
count = Number(a) + 1;
$("#sos-alert").html(
"SOS (<font id='snum'>" + count + "</font>)");
}
}
}
function onError() {
websocket.close();
}
function onClose() {
}
window.close = function() {
websocket.onclose();
}
</script>
총결산위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 JS 가 websocket 장 윤 문의 실시 간 메시지 알림 효 과 를 실현 하 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.