Pop-up Tree Hole Program Feature Additions

Project Address

Project backend address:

/ZyPLJ/ZYTteeHole

The address of the project's front-end page:

ZyPLJ/TreeHoleVue () /ZyPLJ/TreeHoleVue

Current project test access address:

/ Note that it is http, enter https to access to the blog.

Series of Articles 📖

NET Core with Vue open source pop-up effects to implement a small project of comments. Fun! - Mythical House (zy) - Blogland () /ZYPLJ/p/18403223
ZY Knowledge Base - ZY - Pop-up Tree Hole Project () /blog/post/

preamble

Pick up the previous article, bored when doing a tree hole project, in fact, the beginning of the intention to do a real tree hole, but the front-end technology is limited, can only go to GitHub to find inspiration 💡, not coincidentally saw the Vue pop-up project, look at it feel quite good to use it.

The original purpose of this project was to have a place for myself to pour out my thoughts and to be able to just troll. This project currently has no record of comment ip and user information, all anonymous, so you can just troll (of course, need to maintain the quality).

This post is about how I implemented real-time messaging and headcount.

Real-time messages, headcount display implementation

SignalR📖

Since the project is written in .net, it is inevitable that there will be fewerSignalRtechnology, there are several ways to initially consider using message real-time as follows:

WebSocket
SignalR
polling

Final synthesisSignalRThe main thing is that it's easy to use and the functionality I want to achieve is not complicated.

So let's talk briefly.SignalRWhat it is:

SignalR is a real-time communication framework developed by Microsoft that simplifies the process of implementing real-time bidirectional communication in C#.SignalR is especially suitable for applications that require real-time interaction, such as chat programs, online games, and collaborative work tools.
SignalR supports the following techniques for handling real-time communications:

WebSockets

Server-Sent Events

Long polling
SignalR automatically selects the best transmission method within the capabilities of the server and client.

Simply put, you can use theSignalRRapid development of real-time communication projects.

code implementation

back-end code

I'm using a project created with .net 8, which seems to come with theSignalRIf you don't have it then you need to go to Nuget to download it.

The main back-end code is theHubClass Implementation

public class ChatHub:Hub
{
    private static int _connectionCount;
    public async Task SendComment(string content)
    {
		ZyComments comment = new ZyComments
        {
            Content = content
        };
        //Broadcast comments to all connected clients
		await ("ReceiveComment", comment);
    }
    public override Task OnConnectedAsync()
    {
	    // Increase count each time a client connects
        (ref _connectionCount);
        return ();
    }
    public override Task OnDisconnectedAsync(Exception? exception)
    {
	    // Decrease the count each time the client disconnects
        (ref _connectionCount);
        // Change in number of broadcast connections
		_ = BroadcastConnectionCount();
        return (exception);
    }
    public int GetConnectionCount()
    {
		// Get the current number of connections
        return _connectionCount;
    }    
    public async Task BroadcastConnectionCount()
    {
	    await ("ConnectionCountChanged", _connectionCount);
    }
}

The simple description is that the user comment will call theSendCommentmethod broadcasts the message to the currently connected user. It then counts the number of online users ++ while connected, decreases it when disconnected, and broadcasts it to the connected user.

configureDocumentation:

();

<ChatHub>("/ChatHub");

To the end of this end on the writing is complete, is not very simple.

front-end code

Install the client connection library:npm install @microsoft/signalr

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

const connectionCount = ref(0);// Number of connections
let connection:  | null = null;

connection = new ()
    .withUrl('https://localhost:44323/ChatHub') //backend address
    .build();
    
//Subscribe to comment message events
('ReceiveComment', (comment: any) => {
  (comment);
  const _danmuMsg =
      {
	      ...
      }  
  (_danmuMsg)
});

// 订阅Number of connections变化事件
('ConnectionCountChanged', (count) => {
   = count;
  (`当前Number of connections：${count}`);
});

//Called after a successful connectionBroadcastConnectionCountmethod broadcasts once
().then(()=>{
  ('BroadcastConnectionCount')
      .catch(err => (()));
}).catch(err => (()));

......

The above shows part of the code, it is also very simple, when the user creates a connection to call the count method broadcast once, and subscribe to the comment message and the number of connections to change the event, and then when the broadcast is received to execute the appropriate logic.

The area where the code is located:TreeHoleVue/src/Views/ at master · ZyPLJ/TreeHoleVue () /ZyPLJ/TreeHoleVue/blob/master/src/Views/

Effect Showcase💯

Points to be completed 🏷️

comment on limiting traffic
Keyword Filtering
Write the front-end popup settings scrolling frequency, speed, etc. to a configuration file or database.
Complete the writing of the back-office administration module.
Front-end page beautification
Real-time messages, headcount display
Comment Likes Ranking
Highlight the latest comments and when the latest comments were made