Asp.net은 SignalR을 사용하여 메시지 미리 알림을 구현합니다.

1. 소개
이전 글에서는 SignalR을 사용하여 이미지를 전송하는 방법을 소개했는데, 인스턴트 메시징 애플리케이션에서는 메시지 알림이 필수적입니다. 이제 많은 웹사이트에 새로운 메시지 알림 기능이 있습니다. 당연히 이 기능의 구현은 SignalR 시리즈에 필수적입니다. 이 글에서는 SignalR+iNotify 라이브러리를 사용하여 새 메시지에 대한 사운드 및 팝업 알림을 구현하는 방법을 소개합니다.

2. 메시지 알림 구현 아이디어
메시지 알림은 고객에게 새 메시지가 있을 때 클라이언트 오른쪽 하단에 팝업 상자가 알림을 보내는 것을 의미합니다. 이 기능을 구현하는 아이디어는 다음과 같습니다.

1. SignalR 서버가 클라이언트에 메시지를 푸시하는 방식은 클라이언트의 receiveMessage 메서드를 호출하여 메시지를 채팅 기록에 첨부하는 것입니다. receiveMessage 메소드를 사용하여 팝업 상자의 논리를 구현하십시오.
2. 메소드가 정의된 위치를 찾은 후 팝업 효과를 구현하기 위해 더 나은 JS 라이브러리를 찾는 것은 당연합니다. 라이브러리의 github 주소는 https://github.com/jaywcjlove/iNotify이고, 온라인 테스트 주소는 http://jslite.io/iNotify/
3.QQ에서 메시지 알림을 볼 수 있습니다. 일반적으로 현재 탭 페이지에서 채팅을 하지 않을 때 팝업됩니다. 이를 달성하기 위해 Html5 visiblechange 이벤트를 사용할 수 있지만 여기서는 포커스 이벤트인 포커스를 잃는 방법을 사용합니다.
3. 특정 구현 코드
여기에 구현된 구체적인 구현 코드는 두 번째 글의 코드를 기반으로 하고, 그 위에 메시지 알림용 JS 코드를 추가한 것입니다.

여기서 먼저 INotify 라이브러리의 JS 파일을 Index.cshtml 페이지에 도입해야 합니다. 즉,

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Scripts/layer/layer.min.js"></script>
<script src="~/Scripts/iNotify.js"></script>

그런 다음 receivePrivateMessage 메소드에 다음 JS 코드를 추가합니다

var active = true;
 window.onfocus = window.onblur = function(e) {
  active = (e || event).type === "focus";
 };
 
 // 接收消息
  systemHub.client.receivePrivateMessage = function(fromUserId, userName, message) {
  // 专题二中的代码
   
  // 消息提醒的代码
 if (active == false) {
    var iN = new iNotify({
     effect: 'flash',
     interval: 500,
     audio: {
      file: ['/Music/msg.mp3']
     },
     notification: {
      title: "通知！",
      body: '您有一条新消息'
     }
    });
 
    iN.setTitle(true).player();
    iN.setFavicon(true).setTitle(true).notify();
   }
  };
}

위 2단계를 거치면 새 메시지 소리와 팝업 알림이 완료되지만, 이 팝업 기능은 Html5 알림 API를 사용하여 팝업 효과를 구현하기 때문에 IE 브라우저를 지원하지 않습니다. IE 브라우저에서는 지원되지 않습니다. 서버에서 지원하지 않으므로 구현할 수 없습니다. Microsoft의 IE 브라우저는 정말 구덩이라고 볼 수 있으므로 Microsoft는 과감히 포기하고 Edge를 출시했습니다. Edge를 직접 테스트하지는 않았지만 많은 친구들이 여전히 구덩이라고 말했습니다.

다음으로 구체적인 영업실적을 살펴보겠습니다.

이 글은 이것으로 끝입니다. 이 블로그 게시물을 끝으로 SignalR 시리즈가 종료되었습니다. 읽어주신 모든 분들께 감사드립니다.

SignalR을 사용하여 메시지 알림을 구현하는 Asp.net에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!