一个纯粹基于jQuery和Django的SSE站内信通知的例子

这两天写了一个基于SSE技术的站内信通知红点的例子。现在来总结一下。

首先，站内信红点的实现方式基本上就三种：网页上设置一个Timer然后定时轮询；开一个WebSocket长链接；基于SSE的流模式。最终想试试SSE，就写了这个例子。

其次，SSE的实现也有很多种：第一种基于SSE.js；第二种是PHP；第三种是django。我采用的是django。网上大部分的例子都是需要第三方库: django-sse或者Daphen。我就是想基于原生jQuery和Django来实现。最后找了一个好方法，特此记录一下。

Django端的views代码：

def get_unread_message_count_view(request):def event_stream():while True:# 从数据库或其他数据源获取数据messages = Messages.objects.filter(read_flag=False)unread_message_count = messages.count()# 构造SSE消息event = 'message'message = f'data: {unread_message_count}\n\n'yield f'event: {event}\n{message}'response = StreamingHttpResponse(event_stream(), content_type='text/event-stream')response['Cache-Control'] = 'no-cache'return response

urls就是标准的代码

网页端：

<div class="fa-stack fa-2x" id="message_bell" data-count="10"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-bell fa-stack-1x fa-inverse"></i>
</div>

<script type="text/javascript">$(function () {$(document).ready(function() {//data根据需求自定义参数const eventSource = new EventSource('get_unread_message_count');eventSource.addEventListener('message', function(event) {const data = event.data;$("#message_bell").attr("data-count",data);if (data == 0) {$('.fa-stack').addClass('hidden');}else {$('.fa-stack').removeClass('hidden');}// 处理收到的数据});});});</script>