弹幕树洞项目功能新增篇

项目地址

项目后端地址:

项目前端页面地址:

目前项目测试访问地址:

系列文章📖

前言

接上一篇文章,无聊的时候做了个树洞项目,其实一开始打算做真正的树洞,但是奈何前端技术有限,只能去GitHub找找灵感💡,不巧看到了Vue弹幕项目,看了一下觉得挺不错就拿来用了。

那做这个项目的初衷是自己有个地方能倾述自己的想法,能够让自己随便吐槽。这个项目目前是没有记录评论的ip和用户信息的,全是匿名的,所以可以随便吐槽(当然需要保持素质)。

本篇文章主要讲一讲我是怎么实现实时消息和人数的。

实时消息、人数展示实现

SignalR📖

既然是用.net写的项目,必然少不了 SignalR技术,最开始考虑使用消息实时性有如下几种方式:

  1. WebSocket

  2. SignalR

  3. 轮询

最后综合考虑 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

效果展示💯

image

image

待完成的点🏷️

相关链接

posted @   妙妙屋(zy)  阅读(144)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
  1. 1 够爱(翻自 曾沛慈) 是我呀卡司宝贝
  2. 2 老人と海 ヨルシカ
  3. 3 生生世世爱 黄霄雲
  4. 4 希望有羽毛和翅膀 imzat
生生世世爱 - 黄霄雲
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作词 : 杨漩予

作曲 : 林毅

爱 还没来

天地间风云忽然变

有情有义的人都要回来

爱 总会来

生死注定的来世再爱

都等了太久哭尽无奈

rap

是谁站在三清山门外

回首看桃溪花正开

一入岁月江湖中来

再随之去追星辰山海

到底是那恩怨过往

或是爱恨情长 怎么收场

这些年的故事和秘密

都在逆水寒里珍藏

爱恨纠缠的生生世世

爱恨纠缠的生生世世

心底执着的信念为你存在

多遥远的路都阻挡不住

再次拥有没距离的温度

失去自由的生生世世

有爱不懂相拥错过了最爱

送一剑祝福再默默相助

恐怕没以后不自觉留退路

爱 还没来

爱 还没来

天地间风云忽然变

有情有义的人都要回来

爱 总会来

生死注定的来世再爱

都等了太久哭尽无奈

rap

遇过金风细雨楼的刀太快

也遇过六分半堂惊雷开

身处这江湖风雨事

却不知可曾有故人来

轻挥一剑千山过

再回望轻舟多澎湃

我欲乘风逍遥去

纵览天地入我怀

从此我心自在

爱恨纠缠的生生世世

爱恨纠缠的生生世世

心底执着的信念为你存在

多遥远的路都阻挡不住

再次拥有没距离的温度

失去自由的生生世世

有爱不懂相拥错过了最爱

送一剑祝福再默默相助

恐怕没以后不自觉留退路

为情所困的生生世世

为情所困的生生世世

伤也被伤命中成双的伤害

等不到日出一个人孤独

让星光代替我伴你远途

黑白轮回的生生世世

彻底放开成全永远的依赖

是乱世英雄或凡间俗梦

爱不离爱是把这感动留住

爱不离爱是把这感动留住

原唱 : 吴雨霏

OP原始版权人:北京大石音乐版权有限公司、CHANCES CREATIVE MUSIC LTD

SP代理权利人:北京大石音乐版权有限公司、百代音乐版权代理(北京)有限公司

编曲改编:1AN孙毅然

改编词(Rap词):焦糖

Rapper:阿茹汗

笛子实录:水玥儿

混音&母带工程师:王嘉屏

和声:曾雪祁

配唱制作人:沈小力

录音师:邢铜

录音棚:55TEC Studio

出品:逆水寒

企划营销:微梦传媒

点击右上角即可分享
微信分享提示