<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Ahmed Ossama</title>
    <description>The latest articles on Forem by Ahmed Ossama (@ahmedossama22dev).</description>
    <link>https://forem.com/ahmedossama22dev</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F556388%2F34b8bc13-2529-4753-87be-f49f07cc64c3.png</url>
      <title>Forem: Ahmed Ossama</title>
      <link>https://forem.com/ahmedossama22dev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/ahmedossama22dev"/>
    <language>en</language>
    <item>
      <title>Mongodb text index vs regex for text searching</title>
      <dc:creator>Ahmed Ossama</dc:creator>
      <pubDate>Sat, 27 Aug 2022 14:13:04 +0000</pubDate>
      <link>https://forem.com/ahmedossama22dev/mongodb-text-index-vs-regex-for-text-searching-1opk</link>
      <guid>https://forem.com/ahmedossama22dev/mongodb-text-index-vs-regex-for-text-searching-1opk</guid>
      <description>&lt;p&gt;In this post I'll discuss the difference between two methods for text searching in mongodb collection and compare their complexities, pros and cons.&lt;/p&gt;

&lt;h2&gt;
  
  
  A case study
&lt;/h2&gt;

&lt;p&gt;Consider having posts collection where each object consists of title and content:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"_id": ObjectId(""),
"title": "PostA",
"content": "This is the content for the first post."
},
{
"_id": ObjectId(""),
"title": "PostB",
"content": "This is a different content for the second post."
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Our objective here is to search for some text and return the matching documents.&lt;/p&gt;

&lt;h2&gt;
  
  
  Using REGEX
&lt;/h2&gt;

&lt;p&gt;In case we want to search for title it will be easy to use normal find filter&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;db.posts.find({title: "PostA"})&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 if we know exactly the title or to use regex if we know a part of it&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;db.posts.find({title: 'pattern', $options: '&amp;lt;options&amp;gt;'})&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;But if we want to search in the content field, using this&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;db.posts.find({content: "first"})&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 will return nothing as it will search for an exact matching.&lt;br&gt;
So, we can use regex here&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;db.posts.find({content: {$regex: /first/}})&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 this query will return the PostA document as its content contains the word first.&lt;br&gt;
But this will do a full collection scan of O(n) and it will have a poor performance on larger datasets.&lt;/p&gt;
&lt;h2&gt;
  
  
  Using Text Index
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Text Indexes&lt;/strong&gt; : It converts the text into array of single words and it remove all the stop words (is, a, an, etc)&lt;br&gt;
Let's create a text index on our content field&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;db.posts.createIndex({content: "text"})&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 and don't forget to specify "text" to remove unneeded words and store keywords.&lt;br&gt;
to search for a word&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;db.posts.find({$text: {$search: "first"}})&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;This will return PostA.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why we didn't search inside our content in the above query? 🤔&lt;/strong&gt;&lt;br&gt;
Since mongo treat this index as an array of words in order if you want to add another field for this text index, for example we can add both title and content to the index and it will treat them under one text only.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;db.posts.createIndex({title: "text", content: "text"})&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;Note: we can't add another text index while there is already another one so these next lines are illegal and we should add them at once,&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; db.posts.createIndex({content: "text"})
 db.posts.createIndex({title: "text"})
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ok, now we have a combined index on both title and content so if we search with any keyword whether in title or content it will return the correct matching document.&lt;br&gt;
This approach will be very efficient in terms of complexity as it uses indexScan ( O(log(n)) ) also in usability instead of searching in a specific field this will search in a combined multiple fields which is more practical.&lt;/p&gt;
&lt;h3&gt;
  
  
  Exclude words using text index
&lt;/h3&gt;

&lt;p&gt;Let's try to search a post with content contain the 'post' keyword&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;db.posts.find({$text: {$search: "post"}})&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;This query will return both PostA and PostB docs, but we can return only PostB if we exclude the 'first' keyword :&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;db.posts.find({$text: {$search: "post -first"}})&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;This will exclude the docs with content having the word 'first'.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Finally we saw that using text index is faster, easier and preferable to be used and support keyword exclusion, but we have some other cases when we want to search for a substrings or partial word matches like the word Post in PostB in this case we have to use regex.&lt;/p&gt;

</description>
      <category>mongodb</category>
      <category>regex</category>
      <category>database</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Adaptive bitrate streaming</title>
      <dc:creator>Ahmed Ossama</dc:creator>
      <pubDate>Tue, 15 Feb 2022 15:33:19 +0000</pubDate>
      <link>https://forem.com/ahmedossama22dev/adaptive-bitrate-streaming-2o6n</link>
      <guid>https://forem.com/ahmedossama22dev/adaptive-bitrate-streaming-2o6n</guid>
      <description>&lt;h1&gt;
  
  
  Introduction
&lt;/h1&gt;

&lt;p&gt;In this post I will try to explain how video streaming happen, for example when you watch a YouTube video or any online streaming, we will know the protocols behind this and focusing on the Adaptive bitrate over HTTP.&lt;br&gt;
&lt;strong&gt;ALERT&lt;/strong&gt;! &lt;em&gt;The article is a little bit academic so it's ok if you miss some concepts&lt;/em&gt;, Happy reading ')&lt;/p&gt;

&lt;h2&gt;
  
  
  What was before?
&lt;/h2&gt;

&lt;p&gt;Just having a single stream sent out, if you are lucky you will stream it, otherwise you will suffer from repetitive pauses or to watch with the lowest quality.&lt;br&gt;
Another approach is to download the whole video in the main memory in order to guarantee watching, but what if you don’t have enough memory, however it's data consuming since most of us don't watch a whole video, most people nowadays watch only 20% of the video as the content growth is very high.&lt;br&gt;
So we conclude that we have more than one type of video streaming.&lt;/p&gt;

&lt;h2&gt;
  
  
  Types of http video streaming
&lt;/h2&gt;

&lt;p&gt;The Internet uses HTTP streaming over TCP most commonly for video streaming services.&lt;br&gt;
(Youtube, Netflix, etc).&lt;/p&gt;

&lt;p&gt;Regular HTTP Streaming: It completely downloads the video to the client server.&lt;br&gt;
Progressive download: Progressive downloading of the video at a fixed quality.&lt;br&gt;
Adaptive streaming over HTTP: Combination of Adaptive video quality control and progressive Downloading.&lt;/p&gt;

&lt;h1&gt;
  
  
  Adaptive streaming
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--oLUgqqZ8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tcb9p21cxzuyqzlnkkg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--oLUgqqZ8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tcb9p21cxzuyqzlnkkg.png" alt="Image description" width="880" height="447"&gt;&lt;/a&gt;&lt;br&gt;
Adaptive bitrate streaming is a technique used in streaming multimedia over computer networks. While in the past most video or audio streaming technologies utilized streaming protocols such as RTP with RTSP, today's adaptive streaming technologies are almost exclusively based on HTTP and designed to work efficiently over large distributed HTTP networks such as the Internet. It works by detecting a user's bandwidth and CPU capacity in real time and adjusting the quality of the media stream accordingly. It requires the use of an encoder which can encode a single source media (video or audio) at multiple bit rates. The player client switches between streaming the different encodings depending on available resources. "The result: very little buffering, fast start time and a good experience for both high-end and low-end connections."&lt;/p&gt;

&lt;p&gt;More specifically, adaptive bitrate streaming is a method of video streaming over HTTP where the source content is encoded at multiple bit rates. Each of the different bit rate streams are segmented into small multi-second parts. The segment size can vary depending on the particular implementation, but they are typically between two and ten seconds. First, the client downloads a manifest file that describes the available stream segments and their respective bit rates. During stream start-up, the client usually requests the segments from the lowest bit rate stream. If the client finds that the network throughput is greater than the bit rate of the downloaded segment, then it will request a higher bit rate segment. Later, if the client finds that the network throughput has deteriorated, it will request a lower bit rate segment.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Transcoding&lt;/strong&gt;: Converting from one or more codecs, bitrates, or resolutions to others.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0Xu7Bu8G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlnud1h2p5m2b67btn48.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0Xu7Bu8G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlnud1h2p5m2b67btn48.png" alt="Image description" width="880" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The bitrate changes with time as the resources change in order to adapt with it.&lt;/p&gt;

&lt;p&gt;So, what about the client side or actually how the player handles all of this..&lt;/p&gt;

&lt;h3&gt;
  
  
  Player Switching algorithm depends on:
&lt;/h3&gt;

&lt;p&gt;Network throughput&lt;br&gt;
Screen size (Playing with larger bitrates in a small screens will not make sense)&lt;br&gt;
Rendering speed(fps) in games for example.&lt;br&gt;
Buffer size&lt;br&gt;
Previous ABR switches&lt;/p&gt;

&lt;h3&gt;
  
  
  Popular Implementations
&lt;/h3&gt;

&lt;p&gt;MPEG-DASH&lt;br&gt;
Adobe HTTP Dynamic Streaming&lt;br&gt;
Apple HTTP Live Streaming&lt;br&gt;
Microsoft Smooth Streaming&lt;br&gt;
QuavStreams Adaptive Streaming over HTTP&lt;br&gt;
Uplynk&lt;br&gt;
Self learning clients&lt;/p&gt;

&lt;h2&gt;
  
  
  Youtube MPEG dash
&lt;/h2&gt;

&lt;p&gt;MPEG-DASH is the only adaptive bit-rate HTTP-based streaming solution that is an international standard.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--djUQLj9J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inrls86zhuh7iqps87dl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--djUQLj9J--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inrls86zhuh7iqps87dl.png" alt="Image description" width="783" height="430"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here simulating youtube mpeg dash operations where changes occur in user resources may lead to an adaptive change from a higher bitrate to a lower one whether in the video or the audio but it’s most likely in the video since it leads to a bigger change than the audio.&lt;/p&gt;

&lt;p&gt;Trick mode : is when we seek back (rewind) the video it will reset and go back to the default resolution.&lt;/p&gt;

&lt;h2&gt;
  
  
  Relation between the bitrate and resolution
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Bie0aKZR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvkre2wekrz42cujdo07.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Bie0aKZR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvkre2wekrz42cujdo07.png" alt="Image description" width="692" height="427"&gt;&lt;/a&gt;&lt;br&gt;
Bitrate is the amount of data encoded for a unit of time, and for streaming is usually referenced in megabits per second (Mbps) for video, and in kilobits per second (kbps) for audio. From a streaming perspective, a higher video bitrate means a higher quality video that requires more bandwidth. So why doesn’t everyone just upload at the highest bitrate possible? Well, not every viewer can download at the highest bitrate possible.&lt;/p&gt;

&lt;h2&gt;
  
  
  Some Cons
&lt;/h2&gt;

&lt;p&gt;HTTP based adaptive bitrate technologies are more operationally complex than conventional streaming technologies. Here are few thoughts that outline some of those complexities:&lt;/p&gt;

&lt;p&gt;File Size: In HTTP based adaptive bit rate streaming, content is segmented into smaller blocks or objects. Most CDNs (Content Delivery Networks) struggle with large VOD files, especially while handling block sizes in storage. Decreasing block sizes may result in inefficient storage, affecting performance and causing a poor viewing experience.&lt;/p&gt;

&lt;p&gt;Network Overload: HTTP based adaptive bit rate video streams cause more network traffic than MMS or RTSP streams. This is because HTTP based adaptive bit rate video streaming technology is very aggressive and fills up pipes whenever it can whereas regular streaming mechanisms have certain caps and limits.&lt;/p&gt;

&lt;p&gt;Questionable Quality of Service: While viewers expect a quality viewing experience, there’s no guarantee to the quality of service delivered to viewers as QoE technologies sometimes do not meet up to the requirements. A quality video viewing experience is one where there is no buffer lag, but here there is no guarantee of delivering a true HD video.&lt;/p&gt;

&lt;p&gt;The “Thundering Herd'' Problem: The thundering herd problem occurs because caching servers are primarily designed to cache web sites. When the request for an object is initiated, the cache tries to pull the video from the file’s origin and share it with the requester. When multiple requests are initiated simultaneously, the video server is bombarded with requests and this puts a strain on system resources. This is exactly what HTTP adaptive bitrate streaming does and can be inefficient in this way.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>communications</category>
      <category>youtube</category>
      <category>software</category>
    </item>
    <item>
      <title>What's exactly Websockets</title>
      <dc:creator>Ahmed Ossama</dc:creator>
      <pubDate>Wed, 17 Nov 2021 06:30:17 +0000</pubDate>
      <link>https://forem.com/ahmedossama22dev/websockets-ad0</link>
      <guid>https://forem.com/ahmedossama22dev/websockets-ad0</guid>
      <description>&lt;p&gt;In this article we will talk about websockets, it is a computer communication protocol, providing full connections over a single TCP connection.&lt;br&gt;
Before we dive deeper into how it works, let’s discuss briefly on how HTTP works to know &lt;strong&gt;why we have web sockets!&lt;/strong&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  How HTTP works? (http:// , https://)
&lt;/h2&gt;

&lt;p&gt;Consider having a client and a server, the following flow will show us how the communication occur :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The client opens a TCP connection to communicate with the server.&lt;/li&gt;
&lt;li&gt;The client sends a request to the server for example a GET request for an index.html file&lt;/li&gt;
&lt;li&gt;The server responds to that request with a certain status code such as:404 not found or 201 ok.
And this flow continues until the client closes the connection. We can conclude here that this protocol is unidirectional as we can’t receive a response without sending a request and vice versa.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_fZCsC8U--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyzy98l1y2ho43rao0kl.jpg" alt="Image description" width="492" height="280"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now we knew how http works, but in many situations this protocol will overhead, imagine we are having an application like facebook, while you are browsing there’s notifications maybe pop up, guess :&lt;br&gt;
Is it good to be fetched using HTTP?&lt;br&gt;
Here you as a client don’t know that the resource is modified because another user modified it or the service itself modified it, so in this case using HTTP is not the best thing, HTTP will be preferred when a resource that changes hourly or changes only after it knows that a related resource is modified, so that we need something STATEFUL.&lt;/p&gt;
&lt;h2&gt;
  
  
  How does websocket work? (ws:// , wss://)
&lt;/h2&gt;

&lt;p&gt;Having the same client and server :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The client opens a TCP connection.&lt;/li&gt;
&lt;li&gt;A websocket handshake request occurs, this is a normal http request with upgrade header  that asks the server whether to establish a websocket connection or not. &lt;/li&gt;
&lt;li&gt;If it’s ok:

&lt;ul&gt;
&lt;li&gt;The client now is able to send and receive information to and from the server without waiting, then this is a bidirectional protocol.&lt;/li&gt;
&lt;li&gt;If anyone closes the connection, the other will not be able to send information and the connection is terminated from both sides.
&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IYEO8NeP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irlsrn4eynfup0kp2u87.png" alt="Image description" width="249" height="229"&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  When to use websockets?
&lt;/h2&gt;

&lt;p&gt;There are some scenarios where websockets are preferred over HTTP such as Fast Reaction Time, Ongoing Updates.&lt;br&gt;
It’s used in:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Chat Applications&lt;br&gt;
*Consider a chat application that allows multiple users to chat in real-time. If WebSockets are used, each user can both send and receive messages in real-time. Anyone can send you a message without requesting to receive it!&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Real time Applications&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Consider a notification system in a feed application as we talked earlier.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Gaming Applications&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Consider having a multiplayer game running in the browser which its ui is automatically updated upon the current state.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Pros of using websockets
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Full duplex 

&lt;ul&gt;
&lt;li&gt;No polling required and we don’t have to ask for a response repeatedly.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Moderate overhead in establishing connection, and minimal overhead in sending/receiving messages.&lt;/li&gt;
&lt;li&gt;Secure.
## Cons of using websockets&lt;/li&gt;
&lt;li&gt;Since it’s stateful it’s difficult to be horizontally scaled.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Implementing a websocket
&lt;/h2&gt;

&lt;p&gt;We will use python and js to write a very simple websocket to establish connection between a created server and the browser client side.&lt;br&gt;
First of all, implement the server in python language that recieves a messages and instantly reply to it.&lt;br&gt;
Don't forget to "pip install websockets"&lt;br&gt;
Create a folder and place this script file in it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;asyncio&lt;/span&gt;

&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;websockets&lt;/span&gt;

&lt;span class="c1"&gt;# create handler for each connection
&lt;/span&gt;
&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;handler&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;websocket&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;path&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;

    &lt;span class="n"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;websocket&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;recv&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

    &lt;span class="n"&gt;reply&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="s"&gt;"Client:&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;Server:I am fine, thanks!"&lt;/span&gt;

    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;websocket&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;reply&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;



&lt;span class="n"&gt;start_server&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;websockets&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;serve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;handler&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s"&gt;"localhost"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;7000&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;



&lt;span class="n"&gt;asyncio&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;get_event_loop&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="n"&gt;run_until_complete&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;start_server&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;asyncio&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;get_event_loop&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="n"&gt;run_forever&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Second, implement the client side using html and js&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;html&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"en"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"UTF-8"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;http-equiv=&lt;/span&gt;&lt;span class="s"&gt;"X-UA-Compatible"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"IE=edge"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"viewport"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"width=device-width, initial-scale=1.0"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Client&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;onclick=&lt;/span&gt;&lt;span class="s"&gt;"contactServer"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;How are you?&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;script&amp;gt;&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;socket&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;WebSocket&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ws://localhost:7000&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;open&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="nx"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;How are you?&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="p"&gt;});&lt;/span&gt;



&lt;span class="nx"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;message&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;contactServer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="nx"&gt;socket&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Initialize&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After running the file and opening the HTML page, the results as follow&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--BP6_-JYU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iawrv370xp9j0x624gfj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--BP6_-JYU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iawrv370xp9j0x624gfj.png" alt="Image description" width="880" height="251"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Finally, each technology has its pros and cons and using websockets or http depends on the nature of your application and the requirements needed.&lt;br&gt;
 If you only want to receive an update every hour, you will want to go with HTTP. If you want to receive updates every second, a WebSocket might be a better option, because establishing an HTTP connection takes a lot of time.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>computerscience</category>
      <category>architecture</category>
      <category>beginners</category>
    </item>
    <item>
      <title>How browsers handle authentication? </title>
      <dc:creator>Ahmed Ossama</dc:creator>
      <pubDate>Sat, 25 Sep 2021 14:33:55 +0000</pubDate>
      <link>https://forem.com/ahmedossama22dev/how-browsers-handle-authentication-1fhk</link>
      <guid>https://forem.com/ahmedossama22dev/how-browsers-handle-authentication-1fhk</guid>
      <description>&lt;p&gt;Today, I’ll talk about authentication and how your browser handles such a process, First of all, authentication is the act of validating that users are who they claim to be. This is the first step in any security process. There are different ways to authenticate a user, the most popular methods are using SESSION IDs and JWT each of them has its pros and cons, In this article, I’ll discuss a brief about them. so let’s dive into the article.&lt;/p&gt;

&lt;p&gt;Imagine the login process that you are doing every day when you enter your username/mail and your password to enter a website...&lt;/p&gt;

&lt;h2&gt;
  
  
  How the browser communicates with the server
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The browser sends a POST request to the server containing the username and password&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The server checks whether this user exists or not then compare the saved hashed password to that in the request &lt;strong&gt;if everything is fine&lt;/strong&gt;:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;h4&gt;
  
  
  The server sends a success response 201 ok to the browser indicating that the user is found then  browser sets a cookie that contains…….
&lt;/h4&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  HTTP COOKIES
&lt;/h2&gt;

&lt;p&gt;The trivial old way is setting a cookie with key, value pairs containing data that refer to the logged user, the key could be something like 'username' and the value would be the username.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
 "username" : "ahmedossama"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;so, every time the browser communicates with the server it checks the cookie to allow the user to do stuff behind the login, but by this method, it will be easy to deceive the server and act as another user so we need a unique identifier and this gets us into the session ids!&lt;/p&gt;

&lt;h2&gt;
  
  
  Session IDs
&lt;/h2&gt;

&lt;p&gt;Instead of returning raw info about the user, the server will respond with only a random id that only it can understand and then the browser set the cookie to be something like that&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
"sessionID" : "A123"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;whenever the user makes a request, the server has a 3rd party translate this id into understandable information, then it sends a 200 ok if the request is from an authenticated user.&lt;br&gt;
But a problem may occur when having multiple servers running in parallel.&lt;/p&gt;

&lt;p&gt;As we saw, passing user's info by value is non-secure so, we used a token(session ID) to pass user info by reference(need to go to the server each time), this leads us to a great question, what about passing a token by value 🤔 ??&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1632577373590%2FmTVu4otm7.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1632577373590%2FmTVu4otm7.gif" alt="thinker.gif"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  JWT (JSON web tokens)
&lt;/h2&gt;

&lt;p&gt;The server response will be data about the user and a unique signature from the server to guarantee that data.&lt;br&gt;
The jwt token consists of three parts which are the Header, payload, and signature.&lt;/p&gt;
&lt;h3&gt;
  
  
  Header
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{ 
  "typ": "JWT",    
  "alg": "HS256" //This could be HMAC, SHA256, RSA, HS256 or RS256
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  Payload
&lt;/h3&gt;

&lt;p&gt;It contains session data about the user (claims), claims are customizable but take care don't put sensetive or large data in them.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "sub": "1234567890", //subject
  "name": "Ahmed",
  "iat": 1516239022 , //issued at
  "ex" : 3000 ,  //expiry
  "admin" : true
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Signature
&lt;/h3&gt;

&lt;p&gt;Signature is calculated by encoding the header and payload using Base64url Encoding and concatenating them with a period separator. Which is then given to the cryptographic algorithm.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The final jwt token will be something like that&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Falwottx1ml2l7bw0noua.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Falwottx1ml2l7bw0noua.png" alt="jwt"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can play with just here :  &lt;a href="https://jwt.io/" rel="noopener noreferrer"&gt;JWT&lt;/a&gt; &lt;br&gt;
Also, there's lots of drawbacks to using jwt i.e XSS, CSRF attacks and others can make security issues, there's no perfect method ') &lt;/p&gt;

</description>
      <category>webdev</category>
      <category>security</category>
      <category>backend</category>
      <category>database</category>
    </item>
  </channel>
</rss>
