WebSockets - wysyłanie i odbieranie wiadomości
Plik Messagezdarzenie ma miejsce zwykle, gdy serwer wysyła jakieś dane. Wiadomości wysyłane przez serwer do klienta mogą zawierać zwykłe wiadomości tekstowe, dane binarne lub obrazy. Za każdym razem, gdy wysyłane są dane, plikonmessage funkcja jest uruchamiana.
To zdarzenie działa jak ucho klienta dla serwera. Za każdym razem, gdy serwer wysyła dane, plikonmessage zdarzenie zostanie zwolnione.
Poniższy fragment kodu opisuje otwieranie połączenia protokołu Web Socket.
connection.onmessage = function(e){
var server_message = e.data;
console.log(server_message);
}Należy również wziąć pod uwagę, jakie rodzaje danych można przesyłać za pomocą gniazd sieciowych. Protokół gniazda sieciowego obsługuje dane tekstowe i binarne. Jeśli chodzi o Javascript,text odnosi się do łańcucha, podczas gdy dane binarne są przedstawiane jako ArrayBuffer.
Gniazda sieciowe obsługują jednocześnie tylko jeden format binarny. Deklaracja danych binarnych jest wykonywana jawnie w następujący sposób -
socket.binaryType = ”arrayBuffer”;
socket.binaryType = ”blob”;Smyczki
Ciągi znaków są uważane za przydatne w przypadku formatów czytelnych dla człowieka, takich jak XML i JSON. Kiedy tylkoonmessage jest zgłaszane, klient musi sprawdzić typ danych i odpowiednio zareagować.
Fragment kodu służący do określania typu danych jako Ciąg jest wymieniony poniżej -
socket.onmessage = function(event){
if(typeOf event.data === String ) {
console.log(“Received data string”);
}
}JSON (notacja obiektu JavaScript)
Jest to lekki format do przesyłania danych czytelnych dla człowieka między komputerami. Struktura JSON składa się z par klucz-wartość.
Przykład
{
name: “James Devilson”,
message: “Hello World!”
}Poniższy kod pokazuje, jak obsłużyć obiekt JSON i wyodrębnić jego właściwości -
socket.onmessage = function(event) {
if(typeOf event.data === String ){
//create a JSON object
var jsonObject = JSON.parse(event.data);
var username = jsonObject.name;
var message = jsonObject.message;
console.log(“Received data string”);
}
}XML
Przetwarzanie w XML nie jest trudne, chociaż techniki różnią się w zależności od przeglądarki. Najlepszą metodą jest przeanalizowanie przy użyciu biblioteki innej firmy, takiej jak jQuery.
Zarówno w formacie XML, jak i JSON, serwer odpowiada jako ciąg, który jest analizowany po stronie klienta.
ArrayBuffer
Składa się z ustrukturyzowanych danych binarnych. Załączone bity są podane w takiej kolejności, aby można było łatwo śledzić pozycję. ArrayBuffers są przydatne do przechowywania plików graficznych.
Odbieranie danych za pomocą ArrayBuffers jest dość proste. OperatorinstanceOf jest używany zamiast operatora równości.
Poniższy kod pokazuje, jak obsługiwać i odbierać obiekt ArrayBuffer -
socket.onmessage = function(event) {
if(event.data instanceof ArrayBuffer ){
var buffer = event.data;
console.log(“Received arraybuffer”);
}
}Aplikacja demonstracyjna
Poniższy kod programu przedstawia sposób wysyłania i odbierania wiadomości przy użyciu gniazd sieci Web.
<!DOCTYPE html>
<html>
<meta charset = "utf-8" />
<title>WebSocket Test</title>
<script language = "javascript" type = "text/javascript">
var wsUri = "ws://echo.websocket.org/";
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt)
};
}
function onOpen(evt) {
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
function onMessage(evt) {
writeToScreen('<span style = "color: blue;">RESPONSE: ' +
evt.data+'</span>'); websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
writeToScreen("SENT: " + message); websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message; output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id = "output"></div>
</html>Dane wyjściowe pokazano poniżej.
