Lire le chat Twitch sans rater de messages

Application qui permet d'avoir un chat en colonne

a marqué ce sujet comme résolu.
Auteur du sujet

Bonjour,

Je viens vous présenter mon application qui a bien évolué depuis ma demande d’aide en janvier. Elle s’oriente autant aux petits qu’aux moyens/grands streamers !

Un petit streameur aimera :

  • Les messages en dégradés (ça permet de se repositionner rapidement au dernier message lu) ;
  • L’affichage des connectés directement dans le flux des messages ;
  • Les Twitchcards ;
  • Pouvoir régler la taille du texte, des messages, des colonnes et bien d’autres options à découvrir ! ;
  • La fluidité de l’application/page web !

Lirelechat

Il s’agit d’une application de type chat pour Twitch et Youtube. Son nom : Lire le chat (on peut aussi écrire lirelechat). Les colonnes permettent de lire les messages plus facilement et d’en afficher plus à l’écran pour ne pas en rater. Le problème d’une seule colonne c’est que ça augmente les allers-retours de haut en bas avec la scrollbar pour lire l’historique du chat et revenir aux derniers messages.

prévisualisation

Le lien du site : https://lirelech.at/
Twitter : @Lirelechat

Genèse

Mon projet est né il y a déjà plus de 2 ans, pour répondre à la problématique suivante : comment faire en sorte que le chat Twitch affiche plus de messages ? Lorsque un streamer joue, ils peut très vite être débordé par l’animation de son stream et la lecture du chat.

Quand j’ai commencé à réfléchir à cette idée, j’ai vite compris que la hauteur de la fenêtre était une contrainte cependant on avait beaucoup de place sur le côté (toute la largeur n’était pas utilisée). J’ai donc vite compris qu’un système de colonne était la solution pour lire tout le chat !

Explication technique : J’ai commencé par faire 2 versions d’userscripts avant de me décider d’utiliser l’API IRC de twitch. :) Et le site lirelech.at est né !

Screenshot démo

Informations techniques

A part apache 2 qui est utilisé comme serveur HTTP pour servir des fichiers statiques, l’application est actuellement serverless (je compte changer pour certaine des futures fonctionnalités). Etant serverless, le serveur n’a pas connaissance du Token de l’utilisateur. J’utilise l'OAuth 2.0 Implicit Grant ce qui me permet d’éviter de devoir utiliser un serveur de script pour générer le Token. (Sous YouTube ce mode permet de générer un Token valable uniquement 60 minutes).

Mon application est en HTML/LESS et Javascript (pour build mon application j’utilise gulp, terserjs et lesscss). Je n’utilise plus les propriétés CSS pour gérer mes colonnes, mais du JavaScript c’est beaucoup plus fiable et je suis sûr d’obtenir le même résultat peu importe le navigateur et sa version (dans la limite du raisonnable).

Fonctionnalités

1) Un historique horizontal

La première colonne est fixe. Les autres colonnes sont déplaçables pour vous donner accès à l'historique des messages du chat.

2) Le chat est configurable

Le chat est entièrement configurable pour mieux répondre à vos attentes

3) Messages en couleur dégradé

Un repère visuel coloré a été rajouté pour retrouver plus facilement le dernier message lu

4) Affichage du flux du nombre de connecté

Suivre les personnes qui se connectent et déconnectent

5) Affichage de TwitchCard

Les TwitchCards sont des miniatures résumant les événements important se passant sur votre chaine

Bon visionnage,

43.

+2 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte