彈幕樹洞專案功能新增篇

妙妙屋（zy）發表於2024-09-27

專案地址

專案後端地址：

https://github.com/ZyPLJ/ZYTteeHole

專案前端頁面地址：

ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue

目前專案測試訪問地址：

http://tree.pljzy.top/ 注意是http,輸成https就訪問到部落格裡面去了。

系列文章📖

.NET Core搭配Vue開源彈幕效果，實現一個評論小專案。好玩！ - 妙妙屋（zy） - 部落格園 (cnblogs.com) https://www.cnblogs.com/ZYPLJ/p/18403223
ZY知識庫 · ZY - 彈幕樹洞專案 (pljzy.top) https://www.pljzy.top/blog/post/2b33f54a84901364.html

前言

接上一篇文章，無聊的時候做了個樹洞專案，其實一開始打算做真正的樹洞，但是奈何前端技術有限，只能去GitHub找找靈感💡，不巧看到了Vue彈幕專案，看了一下覺得挺不錯就拿來用了。

那做這個專案的初衷是自己有個地方能傾述自己的想法，能夠讓自己隨便吐槽。這個專案目前是沒有記錄評論的ip和使用者資訊的，全是匿名的，所以可以隨便吐槽（當然需要保持素質）。

本篇文章主要講一講我是怎麼實現實時訊息和人數的。

實時訊息、人數展示實現

SignalR📖

既然是用.net寫的專案，必然少不了 SignalR技術，最開始考慮使用訊息實時性有如下幾種方式：

WebSocket
SignalR
輪詢

最後綜合考慮 SignalR，主要是使用起來簡單，並且我要實現的功能也不復雜。

那麼就簡單講下SignalR是什麼：

SignalR是一個由微軟開發的實時通訊框架，它簡化了在C#中實現實時雙向通訊的過程。SignalR特別適用於需要實時互動的應用，如聊天程式、線上遊戲、協同工作工具等。
SignalR 支援以下用於處理實時通訊的技術：

WebSockets

Server-Sent Events

長輪詢
SignalR 自動選擇伺服器和客戶端能力範圍內的最佳傳輸方法。

簡單來講可以使用SignalR快速開發實時通訊專案。

程式碼實現

後端程式碼

我使用的是.net 8建立的專案，好像自帶SignalR，如果沒有則需要去Nuget去下載。

Microsoft.AspNetCore.SignalR.Client

後端主要程式碼就是Hub類的實現

public class ChatHub:Hub  
{  
    private static int _connectionCount;  
    public async Task SendComment(string content)    
    {    
		ZyComments comment = new ZyComments  
        {  
            Content = content  
        };       
        //廣播評論給所有連線的客戶端    
		await Clients.All.SendAsync("ReceiveComment", comment);  
    }
    public override Task OnConnectedAsync()  
    {        
	    // 每次客戶端連線時增加計數  
        Interlocked.Increment(ref _connectionCount);  
        return base.OnConnectedAsync();  
    } 
    public override Task OnDisconnectedAsync(Exception? exception)  
    {        
	    // 每次客戶端斷開連線時減少計數  
        Interlocked.Decrement(ref _connectionCount);  
        // 廣播連線數量變化    
		_ = BroadcastConnectionCount();  
        return base.OnDisconnectedAsync(exception);  
    } 
    public int GetConnectionCount()  
    {       
		// 獲取當前連線數量  
        return _connectionCount;  
    }    
    public async Task BroadcastConnectionCount()  
    {        
	    await Clients.All.SendAsync("ConnectionCountChanged", _connectionCount);  
    }
}

簡單描述就是使用者評論的時候會呼叫SendComment方法將訊息廣播給當前連線的使用者。然後在連線的時候將統計線上使用者的計數++，斷開連線的時候減少，並廣播給連線的使用者。

配置Program.cs檔案：

builder.Services.AddSignalR();

app.MapHub<ChatHub>("/ChatHub");

到此後端就編寫完成了，是不是非常簡單。

前端程式碼

安裝客戶端連線庫：npm install @microsoft/signalr

import * as signalR from '@microsoft/signalr';

const connectionCount = ref(0);// 連線數量
let connection: signalR.HubConnection | null = null;  

connection = new signalR.HubConnectionBuilder()  
    .withUrl('https://localhost:44323/ChatHub') //後端地址 
    .build();
    
//訂閱評論訊息事件
connection.on('ReceiveComment', (comment: any) => {    
  comments.value.push(comment);  
  const _danmuMsg =  
      {        
	      ...
      }  
  danmaku.value.add(_danmuMsg)   
});

// 訂閱連線數量變化事件  
connection.on('ConnectionCountChanged', (count) => {  
  connectionCount.value = count;  
  console.log(`當前連線數量：${count}`);  
});

//連線成功後呼叫BroadcastConnectionCount方法廣播一次
connection.start().then(()=>{  
  connection.invoke('BroadcastConnectionCount')  
      .catch(err => console.error(err.toString()));  
}).catch(err => console.error(err.toString()));

......

上述展示部分程式碼，也很簡單，當使用者建立連線後呼叫一次計數方法廣播一次，並訂閱評論訊息和連線數量變化事件，然後當收到廣播時執行相應的邏輯。

程式碼所在區域：TreeHoleVue/src/Views/Home.vue at master · ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue/blob/master/src/Views/Home.vue

效果展示💯

待完成的點🏷️

評論限流
關鍵詞過濾
將前端彈幕設定滾動頻率、速度等寫入配置檔案或者資料庫。
完成後臺管理模組的編寫。
前端頁面美化
實時訊息、人數展示
評論點贊排行榜
高亮顯示最新評論及最新評論時間