FlexMessage 1.0.0

FLEX MESSAGE

you can,

1. during the runtime process
2. using C# code
3. send various messages
4. to the client
5. in various formats

💡 in the backend of a .net web application.

Features

• Send messages directly from server side to web browser
  You can easily send various messages to the client's web browser using C# code.

• Various types of message delivery methods
  From basic JavaScript alert('') to console.log(''), and customizable toast messages and alert messages, as well as saving to local disk as a text file or storing in a database, developers can implement any type of messaging required depending on the situation.

• Simultaneous transmission of multiple types of messages possible
  You can configure and send multiple types of messages simultaneously as desired.

Usage

// Simply call it like using Console.WriteLine("").
Message.Write($"{message_to_send}", (enum)MsgType.message_service_type)

The types of message services are defined as enum types

/// <summary>
/// Enum class defining the types of message services
/// <summary>
public enum MsgType
{
    Console, // Application system console message (Console.WriteLine)
    File, // Message written to a physical disk text file
    BrowserConsole, // Message displayed in the web browser developer console
    BrowserAlert, // Message displayed in the web browser alert window
    BrowserToast, // Message sent as a web browser toast
    Db // Message inserted into the database
}

Message sending examples

/// 1. As a web browser alert window.
Message.Write("Sample Message.", MsgType.BrowserAlert);

/// 2. As a web browser developer console log.
Message.Write("Sample Message.", MsgType.BrowserConsole);

/// 3. As a text file (asynchronously)
await Message.WriteAsync("Sample Message.", MsgType.File);

/// 4. Send messages in various ways at once.
/// Send a web browser Toast message, output to developer console, 
/// and record to a text file
await Message.WriteAsync("Sample Message.",
MsgType.BrowserConsole,
MsgType.BrowserToast,
MsgType.Db);

Installation

File structure

FlexMessage (root)
|
|--- wwwroot (folder)
|      |---- js (folder)
|             |--------- flexMessage.js   // (*)Front-end js library.
|
|--- Configs (folder)
|      |---------------- Configs.cs   // (*)Class containing application configuration information.
|
|--- Hubs (folder)
|      |---------------- MessageHub.cs   // (*)Hub class for communicating with clients.
|
|--- Messages (folder)
|      |--- Types (folder)
|      |      |--------- BrowserAlertMessages.cs   // Browser notification message class.
|      |      |--------- BrowserConsoleMessage.cs   // Browser developer console message class.
|      |      |--------- BrowserToastMessage.cs   // Browser toast message class.
|      |      |--------- ConsoleMessage.cs   // System console message class.
|      |      |--------- DbMessage.cs   // Database insert message class.
|      |      |--------- FileMessage.cs   // File record message class.
|      |      |--------- MsgType.cs   // (*)Enum containing message type information.
|      |--------- FileMessageCngMonitor.cs   // Class responsible for real-time file change monitoring.
|      |--------- Hasing.cs   // (*)Class for encrypting client's unique Id value.
|      |--------- IMessage.cs   // (*)Interface that all message classes must implement.
|      |--------- Message.cs   // (*)Base class for handling messages.
|
|--- Middlewares (folder)
|      |--------- HubMiddleware.cs   // (*)Middleware class for communicating with clients.
|
|--- Models (folder)
|      |--------- FileEndPosition.cs   // Class for variables used in real-time file monitoring.
|      |--------- IFileEndPosition.cs   // Interface for variables used in real-time file monitoring.
|
|--- Program.cs       // (*)Class containing the starting point of the application.

Required .NET version

.net 6.0 Higher

Required configuration

• 1. Package installation :

  # Package Manager
  PM> NuGet\Install-Package FlexMessage
  

• 2. Insert javascript flexMessage.js file into the common page (ex: _Layout.cshtml)

  <script src="https://cdn.jsdelivr.net/gh/kinadog/FlexMessage@master/src/FlexMessage/wwwroot/js/flexMessage.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/kinadog/FlexMessage@master/src/FlexMessage/wwwroot/js/signalr/signalr.min.js"></script>
  

• 3. Edit Program.cs file :

  // builder.Services is the following object.
  // var builder = WebApplication.CreateBuilder(args);
  
  builder.Services.AddFlexMessage(builder); // Add the FlexMessage service.
  .
  .
  .
  
  // Insert between app.UseRouting() 
  
  app.UseFlexMessage(); // Use the FlexMessage service.
  
  // and app.MapControllerRoute().
  
  app.MapFlexMessage(); // Execute the FlexMessageRoute.
  
  // app.Run();
  

  Installation complete!!

Configuring additional features

• 1. When using the real-time log file viewer feature

  • Edit Program.cs file :

    // builder.Services is the following object.
    // var builder = WebApplication.CreateBuilder(args);
    builder.Services.AddFlexMessage(builder, option => // Add the FlexMessage service.
    {
        option.FileMessageStatus = FileMessageStatus.LiveView;  // On/Off live view of file type messages.
    });
    .
    .
    

  • Edit flexMessage.js file :

            connection.on("ReceiveMessage", function(msgType, 
                  message) {
                switch (msgType) {
                    case "File": {
                        const toast =
                            // Create the div element to be used as the real-time log file viewer 
                            // in the desired location on the page. (In this code, #Logs)
                            let logViewer = document.getElementById('Logs');
                            logViewer.textContent += "\n" + message;
                        break;
                    }
                    // Other types of messages...
                    case ""....
                }
            }
    

• 2. When using a Toast JavaScript plugin other than Bootstrap.

  • Edit flexMessage.js file :

    connection.on("ReceiveMessage", function (msgType, message) {
        switch (msgType) {
            case "BrowserToast": {
              // This code executes the Toast for Bootstrap.
              // If you want to use a different Toast plugin, modify this section of code.
                const toastBody =
                    document.getElementsByClassName('toast-body')[0];
                toastBody.innerHTML = message;
                const toast =
                    new bootstrap.Toast(document.getElementById('toastWrap'));
                toast.show();
                break;
            }
            // Other types of messages...
            case ""....
        }
    }
    

    ＃ Note that you can also use the same method to apply a custom plugin for Alert messages.

• 3. When using the Database Insert feature

  • Edit Program.cs file :

      // builder.Services is the following object.
      // var builder = WebApplication.CreateBuilder(args);
       builder.Services.AddFlexMessage(builder, option => // Add the FlexMessage service.
      {
          option.FileMessageStatus = FileMessageStatus.LiveView or Off;  // On/Off live view of file type messages.
      }, message => {
          try{
              // The code for inserting a message into the database is implemented.
              var options = new DbContextOptionsBuilder<EfDbContext>().Option;
              var schema = new Schema { Message = message, WriteDates = Datetime.Now };
              using var context = new DbContext(options);
              context.Schemas.Add(schema);
              context.SaveChangeAsync();
          }
          catch(Exception e){
              Console.WriteLine(e.Message);
          }
      });
      .
      .
      .
    

Information

Developer Information : Kinadog / id@faither.me
Developer Blog : https://blog.faither.me

This project follows the APACHE License. Please see LICENSE for more information.

How to Contribute

1. Fork (https://github.com/faitherme/FlexMessage/fork.)
2. Create a new branch with (git checkout -b feature/fooBar).
3. Commit your changes with (git commit -am 'Add some fooBar').
4. Push to the branch with (git push origin feature/fooBar).
5. Create a new Pull Request.