Realtime: JavaScript-Beispiele funktionieren bei mir nicht

Erstellt am 29. Mai 2020  ·  12Kommentare  ·  Quelle: supabase/realtime

Hallo,

wollte Sie nur wissen lassen, dass in den JS-Beispielen anscheinend ein Fehler aufgetreten ist.
Ich versuche, dies auf einem node.js-Server zum Laufen zu bringen. (kein JS-Experte)
Der folgende Codeblock funktioniert bei mir nicht.

import { Socket } = '@supabase/realtime-js'

const REALTIME_URL = process.env.REALTIME_URL || 'http://localhost:4000'

var socket = new Socket(REALTIME_URL)
socket.connect()

// Listen to only INSERTS on the 'users' table in the 'public' schema
var allChanges = this.socket.channel('realtime:public:users')
  .join()
  .on('INSERT', payload => { console.log('Update received!', payload) })

was stattdessen funktioniert ist folgendes:

const { Socket } = require('@supabase/realtime-js'); // related to node/browser difference?

const REALTIME_URL = process.env.REALTIME_URL || 'http://localhost:4000/socket' // "/socket" had to be added

var socket = new Socket(REALTIME_URL) 
socket.connect()

var allChanges = socket.channel('realtime:public:users') // removed "this." here (related to node/browser difference?)
  .join()
  .channel // added ".channel" because "join()" returns Push object
  .on('INSERT', payload => { console.log('Record inserted!', payload) })

Danke für die tolle Lib :)

Hilfreichster Kommentar

Ja, vor allem in der Autorisierung. Wir arbeiten gerade daran, also ist es gut, mehr Perspektiven/Ansätze zu bekommen.

Danke, dass du dich hier einmischst. Wenn Sie mit etwas anderem nicht weiterkommen, lassen Sie es uns einfach wissen. Ich lasse dies zu schließen, es sei denn, Sie haben noch etwas übrig

Alle 12 Kommentare

Hallo @retendo ! Danke, dass du lange genug durchgehalten hast, damit es funktioniert.

// related to node/browser difference?

Du hast den Nagel auf den Kopf getroffen. Das obere Beispiel ist für "Browser" JS und das untere für "Server" JS.

Als kurze (nicht ganz zutreffende) Geschichte von JS: Javascript wurde zu Beginn eigentlich nur verwendet, um kleine Dinge im Browser zu tun (kleine Animationen). Dann fingen die Leute an, ganze Websites damit zu bauen.

Dann dachte Google.. Vielleicht können wir dieses JS auch auf einem Server ausführen, nicht nur in einem Browser? Also erstellten sie eine "Teilmenge" von Javascript - nodejs, und sie erstellten eine "Engine", die sie ausführen konnte namens v8 .

Aber NodeJS hat nicht wirklich den gleichen "Dialekt". (Siehe CommonJS vs AMD vs UMD.) Aus diesem Grund gibt es Tools wie babel. Sie "übersetzen" JS zwischen den verschiedenen JS-Dialekten.

Wie auch immer - Sie haben es mit den require('@supabase/realtime-js'); für Node genagelt

Wenn Sie ein schönes einfaches Beispiel haben, das funktioniert, könnten Sie es vielleicht sogar als node-js Beispiel im /examples Ordner hinzufügen? Wir sind sehr offen für Mitwirkende.

Ich denke, die wichtigere Änderung sollte das ".channel" zwischen join() und on( ... ) sein.
Dies scheint nichts mit den Unterschieden von node.js/browser zu tun zu haben.
Oder funktioniert das irgendwie im Browser?
Es scheint, dass .join() ein Push-Objekt anstelle eines Channels zurückgibt.

Ich muss das überprüfen. Haben Sie ein bestehendes Repo, das ich forken kann? Wenn es privat ist, keine Probleme, werde ich in diesem Repo eine kleine Express-Demo erstellen

Habe hier einen Beispielcode:
https://gist.github.com/retendo/3e2ddb90a29dfd0f5a2ab81729c7ed29

Das funktioniert mit dem angepassten Beispielcode

Außerdem funktionieren Wildcart-Pfade nicht auf Kanalpfaden.
socket.channel('realtime:public:users') -> funktioniert
socket.channel(' ') -> defektsocket.channel('realtime: ') -> defekt
socket.channel('realtime:public:*') -> defekt

socket.channel('realtime:public') funktioniert jedoch. Lass den letzten Doppelpunkt einfach weg.

Hey @retendo Entschuldigung für die Kontaktlosigkeit - ich schaue mir das an und baue jetzt ein einfaches nodejs-Beispiel, werde aber wahrscheinlich erst morgen früh meine Zeit beenden.

Zur Info: Diese sollten nicht funktionieren

socket.channel('') -> broken
socket.channel('realtime:') -> broken
socket.channel('realtime:public:*') -> broken (see realtime:public below)

Aber diese sollten

socket.channel('realtime:*') -> listen to changes in the database
socket.channel('realtime:public') -> listen to changes in the public schema
socket.channel('realtime:public:users') -> listen to changes in the users table

Verwenden Sie das "Ein", um verschiedene "Ereignistypen" anzuhören. Verwenden Sie den Code in Ihrem Kern:

// INSERTS
socket.channel('realtime:public')
  .join()
  .channel
  .on('INSERT', payload => {});

// UPDATES
socket.channel('realtime:public')
  .join()
  .channel
  .on('UPDATE', payload => {});

// DELETES
socket.channel('realtime:public')
  .join()
  .channel
  .on('DELETE', payload => {});

// ALL 
socket.channel('realtime:public')
  .join()
  .channel
  .on('*', payload => {});

Hoffe das hilft ein bisschen! Ich habe deinen Code noch nicht getestet, aber er sieht toll aus! Ich sehe genau, wohin Sie damit gehen - einen Proxy erstellen (vielleicht für Authentifizierungszwecke?)

Für die Authentifizierung spezialisierte Socket-APIs, die die zugrunde liegende Datenbankstruktur und einige Änderungen der Nutzlast verbergen.

Kleines Beispiel für dich @retendo. Ich habe deinen Code als Grundlage verwendet, also danke für deinen Beitrag

denke die wichtigere änderung sollte die ".channel" zwischen join() und on( ... ) sein.

Sehen Sie sich den Unterschied zwischen meinem ersten Commit und meinem zweiten an: https://github.com/supabase/realtime/commit/d4c9eced516518f26d0174cc86508dc9530d0738

Grundsätzlich gibt socket.channel() den Kanal zurück und socket.channel.join() das Join-Ereignis. Sie haben also über das Ereignis join auf den Kanal "zugegriffen".

Bitte halten Sie mich über Ihren Proxy auf dem Laufenden - wenn Sie ihn generisch genug halten können, füge ich ihn dem Ordner examples hinzu.

Das macht Sinn. Im ursprünglichen browserbasierten Beispiel war alles miteinander verkettet, also habe ich versucht, es auf diese Weise zu replizieren. Aber die Änderungen in Ihrem zweiten Commit machen es tatsächlich klarer.

Bezüglich des Proxy-Beispiels: Ich werde sehen, was ich tun kann. Sie interessieren sich wahrscheinlich am meisten dafür, wie die Authentifizierung in das Bild passt, oder? Denn die anderen Dinge, die ich erwähnt habe, sollten einfach sein.

Ja, vor allem in der Autorisierung. Wir arbeiten gerade daran, also ist es gut, mehr Perspektiven/Ansätze zu bekommen.

Danke, dass du dich hier einmischst. Wenn Sie mit etwas anderem nicht weiterkommen, lassen Sie es uns einfach wissen. Ich lasse dies zu schließen, es sei denn, Sie haben noch etwas übrig

Jetzt geschlossen, gerne jederzeit wieder öffnen

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen