WIP messenger

README.MD

@@ -17,5 +17,6 @@ This is a basic Twitter clone, but instead of birds we have ducks.
 
 - in order for the database to work, please set up the DATABASE_URL field in .env, we recommand a sqlite driver in a dev environment (for example `DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"`)
 - in order for mails to work, please fill in the MAILER_DSN field with SMTP provider URI in .env
+- a HOST field in .env may be useful (by default in a dev env it would be http://127.0.0.1:8000/)
 - in order for Google OAuth to work, please fulfill OAUTH_GOOGLE_ID and OAUTH_GOOFLE_SECRET fields in .env with your Google OAuth keys
 - if you use ElasticSearch, please set the ELASTICSEARCH_ENDPOINT in the .env

assets/app.js

@@ -67,14 +67,35 @@ if (commentsTogglers.length > 0) {
 
 // better UX for searchbar
 const searchInput = document.querySelector('[name="q"]');
-const searchIconEl = document.querySelector('#searchIcon');
+const searchIconEl = document.querySelector("#searchIcon");
 
 searchInput.addEventListener("focus", () => {
   searchInput.classList.add("w-64");
   searchIconEl.classList.add("scale-125");
-})
+});
 
 searchInput.addEventListener("focusout", () => {
   searchInput.classList.remove("w-64");
   searchIconEl.classList.remove("scale-125");
-})
+});
+
+// toggle messenger
+const chatToggler = document.querySelector("#toggleChat");
+const chatBox = document.querySelector("#chatBox");
+
+chatToggler.addEventListener("click", () => {
+  chatBox.classList.toggle("h-0");
+  chatBox.classList.toggle("h-full");
+});
+
+// Mercure subscriber : refactor it as a Stimulus controller
+// triggered by #chatSubmit
+// targeting the endpoint "publisher" with ["topic" => "chat"] route arg
+function initMercureSubscriber(host, target) {
+  const eventSource = new EventSource(`${host}.well-known/mercure?topic=chat`);
+
+  eventSource.onmessage = (event) => {
+    // will be called every time an update is published by the server
+    console.log(JSON.parse(event.data));
+  };
+}

composer.json

@@ -31,6 +31,7 @@
         "symfony/http-client": "5.3.*",
         "symfony/intl": "5.3.*",
         "symfony/mailer": "5.3.*",
+        "symfony/mercure-bundle": "^0.3.2",
         "symfony/mime": "5.3.*",
         "symfony/monolog-bundle": "^3.1",
         "symfony/notifier": "5.3.*",

config/bundles.php

@@ -19,4 +19,5 @@
     Nelmio\CorsBundle\NelmioCorsBundle::class => ['all' => true],
     ApiPlatform\Core\Bridge\Symfony\Bundle\ApiPlatformBundle::class => ['all' => true],
     Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle::class => ['dev' => true, 'test' => true],
+    Symfony\Bundle\MercureBundle\MercureBundle::class => ['all' => true],
 ];

config/packages/mercure.yaml

@@ -0,0 +1,8 @@
+mercure:
+    hubs:
+        default:
+            url: '%env(MERCURE_URL)%'
+            public_url: '%env(MERCURE_PUBLIC_URL)%'
+            jwt:
+                secret: '%env(MERCURE_JWT_SECRET)%'
+                publish: '*'