WebSocket - brak połączenia

pytanie zadane 7 czerwca 2021 w JavaScript przez rafaeru Początkujący (330 p.)

Witam, mam problem z uzyskaniem połączenia WebSocket poprzez przeglądarkę.

JS:

const socket = new WebSocket('ws://localhost:1234');
 
socket.onopen = function(evt) {
	alert('Connected.');
};
 
socket.onclose = function(evt) {
	alert('Disconnected.');
};
 
socket.onmessage = function(evt) {
	alert(evt.value);
};
 
socket.onerror = function(evt) {
	alert('Error.');
};
 
function send() {
	var txt = document.getElementyById('txt');
	var val = txt.value;
	socket.send(val);
};

HTML:

<!doctype html>
<html lang="pl">
	<head>
		<meta charset="utf-8"/>
		<title>Client</title>
		<script src="websocket.js"></script>
	</head>
	<body>
		Message:<input type="text" id="txt"/>
		<button onClick="send();">Send</button>
	</body>
</html>

Jakie warunki muszę dokładnie spełnić aby nawiązać to połącznie ? Potrzebuje jakiegoś serwera WebSocket ?

Czytałem, że Chrome blokuje połączenia po localhost bez certyfikatu SSL.

Czy może być to spowodowane dostawcą mojego internetu ?

1 odpowiedź

odpowiedź 7 czerwca 2021 przez tangarr Mędrzec (150,800 p.)
wybrane 9 czerwca 2021 przez rafaeru

Najlepsza

Żeby nawiązać połączenie ws://localhost:1234 musisz mieć uruchomiony (na urządzeniu z którego nawiązujesz połączenie) jakiś program nasłuchujący WebSocket na porcie 1234

Pokaż 12 poprzednich komentarzy

komentarz 8 czerwca 2021 przez tangarr Mędrzec (150,800 p.)

Sprawdź logi aplikacji. Widziałem, że któreś połączenie sygnał-slot było nieprawidłowe.

connect(mSocket, SIGNAL(textMessageRecived(QString)), this, SLOT(onReciveMessage(QString)));
// literówka, powinno być
//connect(mSocket, SIGNAL(textMessageReceived(QString)), this, SLOT(onReciveMessage(QString)));

Szczerze to polecam używanie nowej składni połączeń

connect(mSocket, &QWebSocket::textMessageReceived, this, &WebServer::onReciveMessage);

Nowe połączenia tworzone są w trakcie kompilacji, nie ma możliwości skompilowania kodu z literówką w nazwie sygnału lub slotu.

komentarz 8 czerwca 2021 przez rafaeru Początkujący (330 p.)
edycja 8 czerwca 2021 przez rafaeru

Jeśli dobrze rozumiem to linijka w webserver.cpp

connect(mSocket, &QWebSocket::textMessageReceived, this, &WebServer::onReciveMessage);

Odpowiada za pobranie tekstu wiadomości przy nowym połączeniu ?

W sensie jest odpowiednikiem JS'owego ?

socket.onmessage = function(evt) {
	alert(evt.value);
};

Czemu wcześniej miałem też podobną linijkę w pliku dialog.cpp (za co ona jest odpowiedzialna)?

connect(mWebServer, SIGNAL(reciveMessage(QString)), this, SLOT(reciveMessage(QString)));

Bo nie do końca to rozumiem, ale działa.

komentarz 8 czerwca 2021 przez tangarr Mędrzec (150,800 p.)

Mechanizm sygnałów i slotów służy do "przesyłania" wiadomości/danych/zdarzeń między obiektami. Sygnały są funkcjami rozgłaszającymi, informują o wystąpieniu zdarzenia. Sloty są funkcjami reagującymi na zdarzenie.
Funkcja QObject::connect służy do parowania sygnałów ze slotami.
Twoje połączenie było nieprawidłowe z powodu literówki w nazwie sygnału. Sygnał emitowany przez QWebSocket emitowany w momencie otrzymania wiadomości nazywa się textMessageReceived a ty (prawdopodobnie z powodu nieznajomości angielskiego słowa receive) pominąłeś literkę e

PS. Sygnały w Qt bardziej przypominają JSowy addEventListener. Do jednego sygnału można podłączyć wiele slotów.

komentarz 8 czerwca 2021 przez rafaeru Początkujący (330 p.)

Dzięki, muszę jeszcze o tym poczytać. Czyli analogiczne mogę dodać wysyłanie jakiejś wiadomości z aplikacji Qt do JS. Bazując na: https://doc.qt.io/qt-5/qwebsocket.html

Powinienem użyć funkcji

sendTextMessage(const QString &message)

i tutaj nie będzie żadnego sygnału bo to ja ją wywołuje?

Drugie pytanie to docelowo chcę stworzyć program który będzie przesyłał mi 2 zmienne, lepiej będzie użyć 2 portów aby osobno przesłać obie zmienne czy np. da się wysłać tablicę(na pierwszą myśl przyszło mi, żeby przesyłać te wartości np. po przecinku i sobie potem je oddzielać bo to string)? Masz może doświadczenie i wiesz jak będzie bardziej profesjonalnie?

komentarz 8 czerwca 2021 przez tangarr Mędrzec (150,800 p.)

Masz dwa rozwiązania:
1. Wysłać dane w postaci binarnej - wymaga mniej danych ale sam musisz zapewnić odpowiednie kodowanie i odkodowywanie wiadomości po obu stronach
2. Wysłać dane w postaci tekstowej - ta metoda jest bardzo elastyczna i nie musisz się przejmować prawidłową obsługą różnych architektur procesorowych. Możliwe sposoby na przesył danych:
- wiadomość zawiera dane oddzielone jakimś wybranym symbolem np # lub |
- wiadomość w formacie XML
- wiadomość w formacie JSON (ten format powstał specjalnie dla stron internetowych) https://doc.qt.io/qt-5/json.html