{"id":64,"date":"2019-08-19T16:56:32","date_gmt":"2019-08-19T16:56:32","guid":{"rendered":"https:\/\/ngif.de\/?p=64"},"modified":"2019-08-19T16:58:33","modified_gmt":"2019-08-19T16:58:33","slug":"socket-io","status":"publish","type":"post","link":"https:\/\/ngif.de\/?p=64","title":{"rendered":"Socket.io"},"content":{"rendered":"\n<p>Ich hatte im Urlaub ein bisschen Zeit und habe es endlich geschafft Websockets auszuprobieren. Wenn man damit etwas bauen will, st\u00f6\u00dft man zwangsl\u00e4ufig auf Socket.IO, das einem viel Arbeit abnimmt und man muss das Rad ja nicht immer neu erfinden.<\/p>\n\n\n\n<p>Bei Websockets reagiert der Server nicht nur auf Anfragen des Clients mit einer Aktion, sonder kann selbst auch ungefragt mit dem Client kommunizieren. Bei einem Chat z.B. schickt der Server automatisch neue Nachrichten an alle \u00fcber den Socket verbundenen Clients. W\u00fcrde man das auf herk\u00f6mmlichem Wege bauen, m\u00fcsste der Client permanent beim Server nachfragen ob neue Nachrichten eingegangen sind, was nat\u00fcrlich wenig Sinn macht und haufenweise unn\u00f6tigen Traffic erzeugt.<br>Mehr Infos zur Theorie hinter Websockets findet ihr hier: <a href=\"https:\/\/de.wikipedia.org\/wiki\/WebSocket\">https:\/\/de.wikipedia.org\/wiki\/WebSocket<\/a><\/p>\n\n\n\n<p>Ich habe mit Socket.IO in kurzer Zeit einen Gruppen Chat auf Basis von Node und express gebaut. Da l\u00e4sst sich nat\u00fcrlich noch viel verbessern und ich werde noch weiter daran schrauben. <br>F\u00fcr den Anfang und die eingesetzte Zeit, ist es aber schon mal nicht schlecht, finde ich: <a href=\"http:\/\/mcw-group-chat.herokuapp.com\">http:\/\/mcw-group-chat.herokuapp.com<\/a><\/p>\n\n\n\n<p>Bei Socket.io ben\u00f6tigt man 2 wesentliche Bestandteile. Zum einen eine serverseitige Bibliothek f\u00fcr Node.js (<a href=\"https:\/\/www.npmjs.com\/package\/socket.io\">npm<\/a>) und zum anderen eine clientseitige Bibliothek die beim Client, also im Browser des Benutzers, l\u00e4uft. Eine genaue Anleitung findet man auf der offiziellen Seite: <a href=\"https:\/\/socket.io\/\">https:\/\/socket.io\/<\/a><\/p>\n\n\n\n<p>Eigentlich wollte ich das Projekt auf <a href=\"https:\/\/firebase.google.com\/\">Firebase<\/a> deployen, bin dann aber doch bei <a href=\"https:\/\/www.heroku.com\/\">Heroku<\/a> gelandet. Da man bei Websockets einen Server ben\u00f6tigt, der seinen Zustand beh\u00e4lt und nicht, dank serverless Functions, nach jeder Anfrage bei Null anf\u00e4ngt, war das denke ich die beste Wahl und au\u00dferdem kostenlos. <br>Bei <a href=\"https:\/\/www.heroku.com\/\">Heroku<\/a> deployed man in einen so genannten Dyno, das ist eine Art leichtgewichtiger Container. Man muss sich nicht um die Container Einrichtung k\u00fcmmern, daher war das f\u00fcr mich im Moment auch die erste Wahl.<br>Wichtig bei Heroku ist, dass nach einer bestimmten Zeit der Inaktivit\u00e4t der Container pausiert wird und erst beim erneuten Zugriff neu startet. Falls man Daten speichert im Dyno, gehen diese wie bei einem Docker Container verloren! Der Neustart ist nat\u00fcrlich nur bei der Gratis Variante normal. Persistente Daten sollte man ja aber eh nicht innerhalb eines Containers speichern.<\/p>\n\n\n\n<p>Das Deployment auf Heroku, ist wirklich einfach. Man nutzt daf\u00fcr Git und die Heroku CLI. Nach dem Git f\u00fcr das Verzeichnis initialisiert wurde, wird mit der CLI (heroku create) ein neues Projekt auf Heroku angelegt und als Remote Repo hinzugef\u00fcgt. Man muss dann nur noch seine \u00c4nderungen committen und ins Remote Repo auf Heroku pushen (git push heroku master). Abh\u00e4ngigkeiten werden automatisch installiert beim Deployment und die \u00c4nderungen sind je nach Gr\u00f6\u00dfe in Sekunden online.<\/p>\n\n\n\n<p>Auch mit Firebase l\u00e4sst sich so eine Chat Anwendung nat\u00fcrlich umsetzen, dann aber direkt mit einer Datenbank (Firestore), <a href=\"https:\/\/firebase.google.com\/docs\/functions\/video-series\">Functions<\/a> und ohne Socket.io. Hier werden zwar auch Websockets verwendet, aber Firestore hat mit <a href=\"https:\/\/firebase.google.com\/docs\/firestore\/query-data\/listen\">Firestore Listeners<\/a>, eine eigene L\u00f6sung daf\u00fcr parat.<br>Ich habe bei der Suche nach einem Hosting eine sehr gute Anleitung zum deployen von Node Apps als serverless Functions gefunden (<a href=\"https:\/\/youtu.be\/LOeioOKUKI8\">Video hier<\/a>), die vielleicht jemandem hilft.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ich hatte im Urlaub ein bisschen Zeit und habe es endlich geschafft Websockets auszuprobieren. Wenn man damit etwas bauen will, st\u00f6\u00dft man zwangsl\u00e4ufig auf Socket.IO, das einem viel Arbeit abnimmt und man muss das Rad ja nicht immer neu erfinden. Bei Websockets reagiert der Server nicht nur auf Anfragen des Clients mit einer Aktion, sonder [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[17,18,16,13,14,12,15],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-deployment","tag-firebase","tag-heroku","tag-node-js","tag-npm","tag-socket-io","tag-websocket"],"_links":{"self":[{"href":"https:\/\/ngif.de\/index.php?rest_route=\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ngif.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ngif.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ngif.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ngif.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=64"}],"version-history":[{"count":5,"href":"https:\/\/ngif.de\/index.php?rest_route=\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/ngif.de\/index.php?rest_route=\/wp\/v2\/posts\/64\/revisions\/69"}],"wp:attachment":[{"href":"https:\/\/ngif.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ngif.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ngif.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}