{"id":20453210,"url":"https://github.com/danekf/web-socket-exploration","last_synced_at":"2025-07-08T19:06:07.022Z","repository":{"id":57948515,"uuid":"529311212","full_name":"danekf/web-socket-exploration","owner":"danekf","description":"Self guided exploration and writeup about web sockets. Explanation, use and examples","archived":false,"fork":false,"pushed_at":"2022-08-28T19:34:22.000Z","size":247,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T09:49:28.982Z","etag":null,"topics":["http","nodejs","ruby","websocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danekf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-26T15:29:25.000Z","updated_at":"2022-08-26T19:06:47.000Z","dependencies_parsed_at":"2023-01-16T19:15:11.892Z","dependency_job_id":null,"html_url":"https://github.com/danekf/web-socket-exploration","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/danekf/web-socket-exploration","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danekf%2Fweb-socket-exploration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danekf%2Fweb-socket-exploration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danekf%2Fweb-socket-exploration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danekf%2Fweb-socket-exploration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danekf","download_url":"https://codeload.github.com/danekf/web-socket-exploration/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danekf%2Fweb-socket-exploration/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264330520,"owners_count":23591954,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["http","nodejs","ruby","websocket"],"created_at":"2024-11-15T11:12:05.156Z","updated_at":"2025-07-08T19:06:07.002Z","avatar_url":"https://github.com/danekf.png","language":"JavaScript","readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\u003ch1 align=\"center\"\u003eWeb Sockets, a mystery to be solved.\u003c/h3\u003e\n\u003cbr\u003e\n\n\u003ca name=\"Intro\"\u003e\u003c/a\u003e\n\n\u003cp\u003eAs developers, we need to remain aware of the use cases and limitations of the communication protocols we interact with. Each protocol will have its own pros/cons. Differences include, but are not limited to, how a protocol handles encoding, confirmation of receipt, error handling, flow control, queuing, etc...\n\nAs web developers we deal mostly with the client-server model and are familiar with the HTTP protocol. However there is another option for protocol that is favoured when a site requires specific features that use real time data, such as live chats or data for a multiplayer game. That protocol is called Web Socket.\n\nThis repository aims to explore web sockets on a high level through explanation and demonstration.\n\n\u003cbr\u003e\n\n\u003c!--Table of Contents --\u003e\n\u003cdetails\u003e\n  \u003cSummary\u003eTable of Contents\u003c/summary\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003ca href= \"#Intro\"\u003eIntroduction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href= \"#What-is-the-client/server-model\"\u003eWhat is the client/server model?\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href= \"#How-does-an-HTTP-request-function\"\u003eHow does an HTTP request function?\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href= \"#What-is-a-web-socket\"\u003eWhat is a web socket?\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href= \"#A-Deeper-Dive\"\u003eA Deeper Dive\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href= \"#Managed-Solution-VS-Self-Hosted-Server\"\u003eManaged Solution VS Self Hosted Server\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href= \"#Final-Thoughts\"\u003eFinal Thoughts\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\u003cbr\u003e\n\n## What is the client/server model\n\u003cp\u003ePrior to diving into Web Socket, it is important to briefly go over how a client/server model functions on a high level.\u003c/p\u003e\n\u003cp\u003eIn this model, data is stored and managed by a server. This data could be login information,a database of products, a database of client information, web pages, or any other information that someone might want to access.\u003c/p\u003e\n\u003cp\u003eThe client is the end user who wants to access or modify this data.\u003c/p\u003e\n\n\u003cbr\u003e\n\u003cp\u003eIn order to use that data the client will make a request to the server, and the server will respond with the formatted data. The major difference between an HTTP request and a web socket is with how this communication is established and maintained.\u003c/p\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\u003cbr\u003e\n\n## How does an HTTP request function\n\u003cp\u003eAn HTTP request functions as a SINGLE interaction between a client and a server. The client reaches out to the server and will ask for data to be given to it (a GET request) or to modify data on the server with supplied information (a PUT request). Once the response is sent from the server, and the client has confirmed receipt the connection is closed.(The connection will also close if the client has not confirmed receipt of data within a configured amount of time, this would be a timeout condition.)\u003c/p\u003e\n\n\u003cp\u003eBelow is an example of a request from a client using axios, which is a module to simplify requests for JavaScript.\u003c/p\u003e\n\n```sh\n#This example shows how axios can be used to make a request to a website in JavaScript\nconst axios = require('axios');\n\nconst getThisRepo = () =\u003e{\n  axios\n    .get('https://github.com/danekf/web-socket-exploration#What%20is%20a%20web%20socket?')\n    .then(response =\u003e {\n      #Do something is a placeholder function to show where axios could do something with the received response.\n      doSomething(response);\n    })\n}\n```\n\n\u003cp\u003eThis example illustrates one way the browser would have reached out to a DNS (Domain Name System) provider to receive THIS github repository. The client formulates a '.get' request and 'then' waits for the response from the server. Once a response is received, the connection is closed and then \"doesSomething\" with the response. \u003c/p\u003e\n\nAlternatively we could make a request using the command line action \"CURL\". In this example we would get the raw data required to render and run the webpage. This can be run in any modern terminal. \n\u003cbr\u003e\n\n```\ncurl https://github.com/danekf/web-socket-exploration#What%20is%20a%20web%20socket?\n```\n\n\u003cp\u003eIn either case, this example demonstrates that a request is made, the server processes the request and then sends the data to the client. At this point the connection is closed. In order for the client to receive more data the client must make a new request to the server.\u003cp\u003e\n\u003cp\u003eThe image below, taken from betterprogramming, illustrates this interaction clearly.\n\u003cdiv align=\"center\"\u003e\n  \u003ca href= 'https://betterprogramming.pub/sending-type-safe-http-requests-with-go-eb5bd1f91558'\u003e\n    \u003cimg src=\"images/HTTP Request.png\" width='50%' \u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cp\u003eUnfortunately this method of data transfer has its limitations. suppose we wanted to start a chat on a webpage. How would we handle this? We might need a client to check at intervals for new data, but deciding on this interval would end up being complex. We do not want to need to establish a brand new connection every time we need to get or send data. \u003c/p\u003e\n\u003cp\u003eWhat if we looked at a more complex situation such as an online multiplayer game where data needs to be sent and received very quickly. Making multiple requests, and closing them each time would be much too intensive and introduce issues where data is not received in time.\u003c/p\u003e\n\u003cp\u003eIt would be ideal to have the client and server remain connected until the interaction reaches its conclusion, regardless of how long that may take. This is the issue that web socket attempts to solve.\u003c/p\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e  \n\u003cbr\u003e\n\n## What is a web socket\n\u003cp\u003eA web socket is a protocol used in the client/server model, much like HTTP, but is a continuous communication between the client and the server. The request begins in a similar way to an HTTP request but the requested address starts with 'ws:' rather than 'http:'. However the protocol is what is defined as a 'framed' protocol. This means that each time data is sent between the client and the server it follows a standard format, with regulated size and use for each 'chunk' of that data. One such example of the standard is the RFC6455 framing protocol,  which \u003ca href = \"https://www.rfc-editor.org/rfc/rfc6455#section-5.2\"\u003ethis\u003c/a\u003e article covers in great technical detail.\u003c/p\u003e\n\n\n\u003cp\u003eOnce the server receives the request, instead of returning an HTTP response, it will return a 'handshake'. This confirms to the client that the request was received and sends the data required to complete the connection.\u003c/p\u003e\n\n\n\u003cp\u003eAt this point, the client and server will remain in constant communication until either one chooses to terminate the connection (or the connection is lost). \n\u003cp\u003e\u003c/p\u003e\n\u003cp\u003eHere is an example image, taken from geeksforgeeks.org which illustrates this clearly.\u003c/p\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003ca href= \"https://www.geeksforgeeks.org/what-is-web-socket-and-how-it-is-different-from-the-http/\"\u003e\n      \u003cimg src=\"images/WebSocket-Connection.png\" width='50%'\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003cp\u003eOnce the communication is established, both the client and the server can send data to each other in a full duplex manner. This means that they are both able to send data at any point, including when data is being sent by the other. This is a much more ideal protocol for examples such as a live chat, or for an online game since both parties are actively listening at all times.\u003c/p\u003e\n\u003cp\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n## A Deeper Dive\n\u003cp\u003eNow that we have an understanding of what a websocket is, and WHY it exists. The next step is to run through an example of a simple web socket server/client.\u003c/p\u003e\n\u003cp\u003eThe chosen example will use NodeJs and the websocket npm package to create a simple websocket server and client to show the simplicity of establishing a connection.\u003c/p\u003e\n\u003ca href = https://github.com/danekf/web-socket-exploration/tree/main/Web_Socket_example\u003eClick here to explore my solution\u003c/a\u003e\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\u003cbr\u003e\n\n## Managed Solution VS Self Hosted Server\n\u003cp\u003eWhen looking at implementing a web socket, on of the final questions to ask ourselves is whether to self host a solution or use a third party managed solution.\u003c/p\u003e\n\u003cp\u003eFor self hosting, popular servers include \u003ca href='https://faye.jcoglan.com/'\u003eFAYE\u003c/a\u003e for Ruby or \u003ca href='https://www.npmjs.com/package/websocket'\u003ewebsocket\u003c/a\u003e in NodeJS (as seen with the Deeper Dive example). A self hosted solution, while the most complex solution, is the most flexible. You are able to tailor each step of the process yourself and optimize yourself.\u003c/p\u003e\n\u003cp\u003eWhile it is easy to setup a simple web socket server and client, it may be of interest to leverage a managed solution.\u003c/p\u003e\n\n\u003cp\u003eA managed solution, such as \u003ca href=\"\"\u003ePusher\u003c/a\u003e offers pre-built solutions to lower development time and allows your team to focus on what you want your application to achieve, rather than implementing the web socket. They also have the ability to scale solutions easily as your application use grows, once again lowering the development burden. For a smaller team this is a very attractive prospect and is well worth considering when you want to focus your team's attention on other features. A pre-built solution also allows for easier addition of realtime data later into development, when a smaller subset of realtime features is required.\u003c/p\u003e\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\u003cbr\u003e\n\n## Final Thoughts\n\u003cp\u003eWhile web socket is very flexible and useful when sending data, it is more complex to setup and its power might not be worth the extra development time for simple requests. A best practice would be to set out your requirements, if your application requires frequent back and forth data, such as realtime updates, then consider a web socket for that element.\u003c/p\u003e\n\n\u003cp\u003eOtherwise it would seem best to implement a more simple HTTP request. Should the need arise to get some real time data, it is possible to implement at a later date, whether it is a custom solution or a third party one. \u003c/p\u003e\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\u003cbr\u003e\n\n## References :\n\u003cul\u003e\n\u003cli\u003e\u003c/li\u003e\n\u003cli\u003e\u003c/li\u003e\n\u003cli\u003ehttps://www.wallarm.com/what/a-simple-explanation-of-what-a-websocket-is\u003c/li\u003e\n\u003cli\u003ehttps://betterprogramming.pub/sending-type-safe-http-requests-with-go-eb5bd1f91558\u003c/li\u003e\n\u003cli\u003ehttps://www.geeksforgeeks.org/what-is-web-socket-and-how-it-is-different-from-the-http/\u003c/li\u003e\n\u003cli\u003ehttps://pusher.com/tutorials/build-a-realtime-stock-ticker-with-ruby-and-pusher-channels/\u003c/li\u003e\n\u003cli\u003ehttps://sookocheff.com/post/networking/how-do-websockets-work/\u003c/li\u003e\n\u003cli\u003ehttps://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API\u003c/li\u003e\n\n\n\u003c/ul\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanekf%2Fweb-socket-exploration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanekf%2Fweb-socket-exploration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanekf%2Fweb-socket-exploration/lists"}