Node.js with socket.io - jak bez przeładowania strony wysłać pliki z jednego klienta do drugiego?

Dzień Dobry, chciałem zrobić taki czat jak na fb, gg ...
Wiem że będę musiał najpierw wysłać na serwer, a potem wysłać do klientów, inne osoby na czacie -Tylko chciałbym to zrobić bez przeładowania strony.Jak to można zrobić? czego użyć? (chodzi po prostu o wysłanie jakiś plików na czat)
Mam tylko podstawy z JS, niewiele... aktualnie się tego uczę...

No dokładnie możesz użyć do tego Node i Socket.io - poczytaj trochę o tym, jest pełno tutoriali choćby na YT.

ale ja już użyłem, tylko mam problem z wysyłaniem plików, bez odświeżenia, a żadnego tutoriala nie znalazłem więc się zapyrałem

Zacznijmy od tego, że przesyłanie plików nie jest Ci do tego potrzebne. W praktyce wykorzystasz format JSON. Czyli w uproszczeniu:

Przykładowa wiadomość:

{
  "conversationID": "conversation-id-1234",
  "senderID": "user-id-1234",
  "message": "Hej!"
}

1. Osoba A wysyła wiadomość do serwera
2. Serwer (socket.io) odbiera wiadomość. Sprawdza kto jest podłączony do danej rozmowy (jego connectionID).
3. Serwer wysyła do podłączonych użytkowników wiadomość (również do nadawcy, w ten sposób mamy pewność, że wiadomość została poprawnie wysłana).
4. Osoba A oraz osoba B otrzymuje za pomocą socket.io nową wiadomość, którą wyświetla na liście.

Jest to jeden z najproszych sposobów na implementację tego. Pominąłem autentykację, łączenie się z wybraną rozmową oraz przechowywanie archiwum rozmów.

Może się przydać:
https://stackoverflow.com/questions/4647348/send-message-to-specific-client-with-socket-io-and-node-js

spoczko, mam takie rzeczy już zrobione, ale chodziło mi o pobieranie plików, np. tak jak jest na fb

Nie zrobisz tego bez odświeżania strony, ew. możesz zrobić iframe który będzie się odświeżał: http://viralpatel.net/blogs/aja

Tworzysz endpoint do uploadu plików. W momencie jak użytkownik doda plik wysyłasz go pod ten endpoint i zwracasz jakiś id pliku. Następnie wysyłasz wiadomość do odbiorcy z danym typem np. "attachment" i id pliku. Po drugiej stronie odbiorca dostaje tę wiadomość i nie wyświetla jej userowi, a pobiera z innego endpointu plik o danym id. Na końcu renderujesz wszystko w okienku. Nie słyszałem, żeby ktoś używał web socketów do uploadu plików, chyba że mówimy o IoT i komunikacji po sieci lokalnej, wtedy ma to swoje plusy.

Bogaty Rycerz napisał(a):

Tworzysz endpoint do uploadu plików. W momencie jak użytkownik doda plik wysyłasz go pod ten endpoint i zwracasz jakiś id pliku. Następnie wysyłasz wiadomość do odbiorcy z danym typem np. "attachment" i id pliku. Po drugiej stronie odbiorca dostaje tę wiadomość i nie wyświetla jej userowi, a pobiera z innego endpointu plik o danym id. Na końcu renderujesz wszystko w okienku. Nie słyszałem, żeby ktoś używał web socketów do uploadu plików, chyba że mówimy o IoT i komunikacji po sieci lokalnej, wtedy ma to swoje plusy.

0_0 ale że nie rozumiem nic z tego, no właśnie takie coś chce zrobic dla plików, jak na fb,
ale nie rozumiem nic z tego co napsiałeś

Endpoint to ścieżka po stronie serwera. Wysyłasz plik na określony adres, a następnie kiedy operacja się powiedzie, wysyłana jest wiadomość do Ciebie oraz drugiej osoby. W tej wiadomości znajdują się informacje o np. nazwie pliku + jego id. Wyświetlasz łącze do pobrania pliku. Kiedy druga osoba zechce pobrać plik, to klika na to łącze np. https://example.com/downloadFile/2819012. Wtedy rozpoczynasz standardową operację pobierania pliku.

dobrze, teraz pytanie sprowadza się jak wysłać plik bez refreshu strony. hihihi

bartek164 napisał(a):

dobrze, teraz pytanie sprowadza się jak wysłać plik bez refreshu strony. hihihi

Żeby coś wysłać JSem bez refreshu strony używasz zapytań http w skryptach po stronie przeglądarki. Możesz skorzystać z JS metody tworzenia requestów XMLHttpRequest(), lub użyć gotowej biblioteki (np. Ajax w JQuery, albo Axios - ja polecam Axiosa, jest fajny, prosty, szybki i można używać go również z poziomu skryptów Node). Zapytanie wysyłasz nasłuchując zdarzeń w skypcie JS po stronie przeglądarki. Poczytaj o:

• Zapytania http w JavaScript
• Eventy w JavaScript.

Odbiór wysłanych danych łapiesz również w JS, ale po stronie serwera, korzystając z Node'a.