https://github.com/norlandz/tlightchat-main-preview

Real time video & text communication.
https://github.com/norlandz/tlightchat-main-preview

chat communication-application expressjs nextjs react redux video-streaming webrtc

Last synced: 2 months ago
JSON representation

Real time video & text communication.

• Host: GitHub
• URL: https://github.com/norlandz/tlightchat-main-preview
• Owner: Norlandz
• Created: 2023-11-02T01:39:28.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-02T04:10:07.000Z (over 2 years ago)
• Last Synced: 2025-01-05T09:42:25.795Z (over 1 year ago)
• Topics: chat, communication-application, expressjs, nextjs, react, redux, video-streaming, webrtc
• Language: TypeScript
• Homepage: https://tlightchat.netlify.app
• Size: 2.52 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: docs/readme.html

Awesome Lists containing this project

README

          

    

    

        

        Introduction

        

/* From extension vscode.github */

/*---------------------------------------------------------------------------------------------

 *  Copyright (c) Microsoft Corporation. All rights reserved.

 *  Licensed under the MIT License. See License.txt in the project root for license information.

 *--------------------------------------------------------------------------------------------*/

.vscode-dark img[src$=\#gh-light-mode-only],

.vscode-light img[src$=\#gh-dark-mode-only] {

	display: none;

}

        

        

        

.task-list-item {

    list-style-type: none;

}

.task-list-item-checkbox {

    margin-left: -20px;

    vertical-align: middle;

    pointer-events: none;

}

        

pre {

  position: relative;

}

pre, pre code {

  font-family: Consolas;

  font-size: 12px;

}

h1 {

  font-family: Consolas;

  font-size: 32px;

}

h2 {

  font-family: Bell MT;

  font-size: 30px;

}

h3 {

  font-family: Lucida Fax;

  font-size: 22px;

}

h4 {

  font-family: Bookman Old Style;

  font-size: 18px;

}

h5 {

  font-family: Palatino Linotype;

  font-size: 16px;

}

h6 {

  font-family: Arial;

  font-size: 14px;

}

h1, h2, h3, h4, h5, h6 {

  margin: 0;

  padding: 0;

  margin-top: 0.25em;

  margin-bottom: 0.25em;

}

table, th, td {

  border: 1px solid;

}

table {

  margin: 1em;

  border-collapse: collapse;

  width: -moz-max-content;

  width: max-content;

  max-width: 1500px;

}

tbody tr:nth-child(even) {

  background-color: rgba(245, 248, 255, 0.8);

}

tbody {

  border: 5px solid rgba(147, 174, 207, 0.9);

  border-top: 10px solid rgba(147, 174, 207, 0.9);

}

table p {

  margin-bottom: 0.3em;

}

td {

  padding: 0.3em;

  text-align: left;

  vertical-align: top;

  font-size: 90%;

}

dl {

  display: block;

  margin: 0;

  padding: 0;

  position: relative;

}

dt {

  display: block;

}

dd {

  display: block;

  margin: 0;

  padding: 0;

  margin-left: 1em;

  position: relative;

  line-height: 110%;

  margin-bottom: 1.5em;

}

ol, ul {

  display: block;

  margin: 0;

  padding: 0;

  position: relative;

}

li {

  margin: 0;

  padding: 0;

  margin-left: 1em;

  /* padding-left: 1em; */

}

:is(ol, ul, dl)::before {

  content: "";

  background: linear-gradient(180deg, rgba(182, 182, 182, 0.5) 0%, rgba(241, 241, 241, 0.5) 15%, rgba(241, 241, 241, 0.5) 95%, rgba(182, 182, 182, 0.5) 100%);

  display: block;

  height: 100%;

  width: 2px;

  position: absolute;

}

img {

  -o-object-fit: scale-down;

     object-fit: scale-down;

  max-width: 650px;

  max-height: 200px;

  text-align: center;

}

img {

  cursor: zoom-in;

}

figure {

  text-align: center;

}

a {

  color: rgb(70, 2, 122);

  text-decoration: none;

}

blockquote {

  padding: 1px 0px 1px 1em;

  border-left: 4px solid rgba(203, 203, 203, 0.8);

  background-color: rgba(248, 248, 248, 0.8);

}

/*  */

p {

  margin: 0;

}

blockquote {

  margin: 0.3em 0 0 0;

}

    

    

        
Introduction

Real time video & text communication.



go to tlightchat.netlify.app



(if the Server in https://tlightchat.netlify.app is down,


use offline mode in https://tlightchat-offline.netlify.app


or https://norlandz.github.io/tlightchat-main-preview/dist/index.html )





go to WebrtcVideoCommunication in nav bar

wait for SignalServer respond

wait for WebrtcVideoCommunication fully loaded

follow instruction on WebrtcVideoCommunication -- choose a Peer to Connect with



Demo image

Internal design

// todo (i will go brief on this, since i went some detailed on the other project, but was not worth it)

techstack / servers



Vite -- frontend Ui

WebRtc -- P2P video connection

Xstate -- state management & event dispatch

SignalServer -- backend Server -- uses Websocket

Aws -- host for the Services

Netlify -- domain name & reverse proxy



main design





H:\Using\TLightChat\tlightchat-main\src\webrtcVideoCommunication\dataStructure\WebrtcConnectionAnchor.ts

central data structure (/ model)





H:\Using\TLightChat\tlightchat-main\src\webrtcVideoCommunication\service\WebrtcConnectionService.ts

central service (-- app logic; webrtc connection; state management; event dispatch;)





--





H:\Using\TLightChat\tlightchat-main\src\webrtcVideoCommunication\panel\WebrtcConnectionAnchorGridPanel.tsx

central panel for video connection

H:\Using\TLightChat\tlightchat-main\src\webrtcVideoCommunication\panel\VideoConnectionControlPanel.tsx

central panel for video connection control





--


--





H:\Using\TLightChat\tlightchat-main\src\SignalServer.ts

SignalServer





--


--





H:\Using\TLightChat\tlightchat-main\src\webrtcVideoCommunication

main folder for webrtcVideoCommunication





H:\Using\TLightChat\tlightchat-main\src\webrtcVideoCommunication\service\xstate

state machine





H:\Using\TLightChat\tlightchat-main\src\session\AppSession.ts


H:\Using\TLightChat\tlightchat-main\src\webrtcVideoCommunication\service\EventEmitterNested_forWebrtcConnection.ts


H:\Using\TLightChat\tlightchat-main\src\webrtcVideoCommunication\App_WebrtcVideoCommunication_connectToServer.tsx

session management





H:\Using\TLightChat\tlightchat-main\src\webrtcVideoCommunication\redux

redux





demo image design -- state machine; class uml;

Problems facing

Domain name & Websocket



domain name is "borrowed" from Netlify (I have no money to buy a domain name)


//repeat: Aws is the actual place where all the Services are hosted


//repeat: Netlify serves as a reverse proxy

since Im using a reverse proxy, there is a issue with the Websocket



Security



this is an experimental project

do not post any important information on the Chat -- this is insecure, though it appears to be https


(the database may be destroyed when server is down)