title
A Beginner's Guide to WebSockets

description
A gentle introduction to the web-socket protocol, how it works, it's intended usage and a number of examples where it can be used with Python and it's popular web frameworks - topped off with a rapid demonstration of the speed and ease of which it can be implemented with Python. Talk given by Dion Misic at PyCon Australia in August 2018. This talks is under the creative commons license. freeCodeCamp is not associated with this talk but we are excited to bring it to a wider audience. -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

detail
{'title': "A Beginner's Guide to WebSockets", 'heatmap': [{'end': 610.596, 'start': 580.447, 'weight': 0.801}, {'end': 852.02, 'start': 812.205, 'weight': 1}], 'summary': "《a beginner's guide to websockets》 provides an introduction to websockets, covering osi networking layers, http methods and headers, server communication, browser support, and websocket benefits. it includes insights into real-time communication, browser support, and performance comparisons between websockets and http.", 'chapters': [{'end': 45.997, 'segs': [{'end': 45.997, 'src': 'embed', 'start': 0.529, 'weight': 0, 'content': [{'end': 7.531, 'text': "Today, as you were saying, I'm going to be talking about WebSockets and we're going to be talking about it from sort of a beginner's standpoint.", 'start': 0.529, 'duration': 7.002}, {'end': 12.313, 'text': "so someone who's never actually really used it more has sort of like heard of what WebSockets is,", 'start': 7.531, 'duration': 4.782}, {'end': 16.474, 'text': 'but has never actually gone to the effort of actually using it in one of their projects.', 'start': 12.313, 'duration': 4.161}, {'end': 19.735, 'text': 'So, a bit about me.', 'start': 18.795, 'duration': 0.94}, {'end': 21.015, 'text': "I'm Dion Missick.", 'start': 20.355, 'duration': 0.66}, {'end': 21.896, 'text': "That's my name.", 'start': 21.035, 'duration': 0.861}, {'end': 25.777, 'text': "I'm a full-time associate developer at WiseTech currently.", 'start': 23.296, 'duration': 2.481}, {'end': 32.627, 'text': "I study at UTS doing the BIT Co-op Scholarship, so that's the Bachelor of Information Technology.", 'start': 27.483, 'duration': 5.144}, {'end': 41.474, 'text': 'I spoke at PyCon last year, some of you might have been at my talk, and I did a bit of data science work at the ANU last year as well.', 'start': 34.188, 'duration': 7.286}, {'end': 45.997, 'text': "And so I'm 18 years old and I'm obviously from Canberra and have recently moved up here to study.", 'start': 42.094, 'duration': 3.903}], 'summary': "Dion missick, a full-time associate developer at wisetech, discusses websockets from a beginner's perspective, sharing his background and experience in tech.", 'duration': 45.468, 'max_score': 0.529, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4529.jpg'}], 'start': 0.529, 'title': 'An introduction to websockets', 'summary': "Introduces websockets and features the speaker's background and experience as an 18-year-old full-time associate developer at wisetech and a student at uts with a bachelor of information technology.", 'chapters': [{'end': 45.997, 'start': 0.529, 'title': 'Introduction to websockets', 'summary': 'Provides an introduction to websockets, aimed at beginners, with the speaker sharing his background and experience as an 18-year-old full-time associate developer at wisetech and a student at uts with a bachelor of information technology.', 'duration': 45.468, 'highlights': ['Dion Missick is an 18-year-old full-time associate developer at WiseTech, studying at UTS for a BIT Co-op Scholarship, and has experience in data science work at ANU.', 'The chapter aims to provide an introduction to WebSockets for beginners who have heard of it but have not used it in their projects.', 'The speaker has spoken at PyCon and recently moved to study, providing a diverse background in technology and speaking engagements.']}], 'duration': 45.468, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4529.jpg', 'highlights': ['Dion Missick is an 18-year-old full-time associate developer at WiseTech, studying at UTS for a BIT Co-op Scholarship, and has experience in data science work at ANU.', 'The chapter aims to provide an introduction to WebSockets for beginners who have heard of it but have not used it in their projects.', 'The speaker has spoken at PyCon and recently moved to study, providing a diverse background in technology and speaking engagements.']}, {'end': 319.187, 'segs': [{'end': 105.224, 'src': 'embed', 'start': 79.198, 'weight': 0, 'content': [{'end': 88.24, 'text': "And we'll go a bit about the browser support and the characteristics of WebSockets as a protocol and how fast it is in comparison to other implementations.", 'start': 79.198, 'duration': 9.042}, {'end': 92.101, 'text': "And of course, what you're all here for is the Python aspect of it.", 'start': 89.64, 'duration': 2.461}, {'end': 98.442, 'text': "So we're going to go over how Python has a role to play with it and how easy it is to do things with WebSockets with Python.", 'start': 92.121, 'duration': 6.321}, {'end': 105.224, 'text': "And just a quick note at the end, we're going to go quickly over how deploying WebSockets works over the web.", 'start': 99.443, 'duration': 5.781}], 'summary': "Websockets' speed compared to other protocols, python's role, and deploying over the web.", 'duration': 26.026, 'max_score': 79.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf479198.jpg'}, {'end': 208.142, 'src': 'embed', 'start': 161.838, 'weight': 1, 'content': [{'end': 169.906, 'text': "And I want to mention that UDP, the less important one to TCP, is a bit more careless, and it doesn't really care about this guarantee of order.", 'start': 161.838, 'duration': 8.068}, {'end': 175.831, 'text': "And it's generally used for things like streaming video data, where we don't care if we lose some of the packets on the way.", 'start': 170.106, 'duration': 5.725}, {'end': 179.074, 'text': 'And so TCP is sort of the underlying..', 'start': 177.233, 'duration': 1.841}, {'end': 184.745, 'text': "transport layer behind a lot of the things I'm going to be talking about today.", 'start': 181.162, 'duration': 3.583}, {'end': 187.607, 'text': 'And so then you move up to the next stage, which is the internet layer.', 'start': 185.285, 'duration': 2.322}, {'end': 196.694, 'text': 'So this is things like IPv4 and IPv6, which define the addresses which packets are sent, right? So everyone has an IP address.', 'start': 188.108, 'duration': 8.586}, {'end': 199.997, 'text': "You've probably heard of this in any regards.", 'start': 196.734, 'duration': 3.263}, {'end': 203.719, 'text': "It's pretty much where data is sent on the web.", 'start': 200.877, 'duration': 2.842}, {'end': 208.142, 'text': 'And so we then get to the application layer, which is sort of the top level layer.', 'start': 204.76, 'duration': 3.382}], 'summary': 'Udp is used for streaming video data, while tcp is the underlying transport layer for many applications. ipv4 and ipv6 define the addresses for packet transmission.', 'duration': 46.304, 'max_score': 161.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4161838.jpg'}, {'end': 303.884, 'src': 'embed', 'start': 276.143, 'weight': 3, 'content': [{'end': 283.806, 'text': "So I'm going to be talking a bit about what HTTP is and a bit of the characteristics behind it,", 'start': 276.143, 'duration': 7.663}, {'end': 288.167, 'text': 'so you can sort of understand where HTTP and WebSockets sit relative to each other.', 'start': 283.806, 'duration': 4.361}, {'end': 298.462, 'text': "So HTTP stands for hypertext transfer protocol, and it's a stateless protocol, which means after the initial request is done, that's it.", 'start': 289.42, 'duration': 9.042}, {'end': 303.884, 'text': 'The channel between the client and the server is completely lost after this initial request.', 'start': 299.002, 'duration': 4.882}], 'summary': 'Http is a stateless protocol for transferring hypertext, with the channel lost after the initial request.', 'duration': 27.741, 'max_score': 276.143, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4276143.jpg'}], 'start': 48.967, 'title': 'Websockets, osi networking layers', 'summary': "Covers websockets overview, protocols, python's role, tcp vs. udp comparison, and osi networking layers, including internet, transport, and application layers, insights into http and websockets.", 'chapters': [{'end': 184.745, 'start': 48.967, 'title': 'Websockets and python: protocols, applications, and deployment', 'summary': "Covers an overview of websockets, including protocols, use cases, browser support, and python's role, as well as a comparison between tcp and udp in the context of data packet transfer.", 'duration': 135.778, 'highlights': ["The chapter covers an overview of WebSockets, including protocols, use cases, browser support, and Python's role The chapter discusses the basic low-level understanding of protocols, use cases, applications, browser support, and Python's role in WebSockets.", 'Comparison between TCP and UDP in the context of data packet transfer The chapter explains the differences between TCP and UDP, where TCP guarantees the order of data packet arrival while UDP is more careless and commonly used for streaming video data.']}, {'end': 319.187, 'start': 185.285, 'title': 'Understanding osi networking layers', 'summary': 'Explains the osi networking layers, including the internet, transport, and application layers, and provides insights into http and websockets, with a focus on their characteristics and operations.', 'duration': 133.902, 'highlights': ['The chapter explains the OSI networking layers, including the internet, transport, and application layers. Provides an overview of the OSI networking layers.', "HTTP stands for hypertext transfer protocol, and it's a stateless protocol, which means after the initial request is done, that's it. Explains the stateless nature of HTTP.", "WebSockets sit relative to HTTP, and it's a stateful protocol, which means that once the initial connection is made, it stays open until the client or server decides to close this connection. Highlights the stateful nature of WebSockets relative to HTTP."]}], 'duration': 270.22, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf448967.jpg', 'highlights': ["The chapter covers an overview of WebSockets, including protocols, use cases, browser support, and Python's role.", 'Comparison between TCP and UDP in the context of data packet transfer.', 'The chapter explains the OSI networking layers, including the internet, transport, and application layers.', "HTTP stands for hypertext transfer protocol, and it's a stateless protocol, which means after the initial request is done, that's it.", "WebSockets sit relative to HTTP, and it's a stateful protocol, which means that once the initial connection is made, it stays open until the client or server decides to close this connection."]}, {'end': 620.066, 'segs': [{'end': 346.85, 'src': 'embed', 'start': 320.727, 'weight': 3, 'content': [{'end': 324.669, 'text': 'In the HTTP model, clients who are requesting data have to specify an action.', 'start': 320.727, 'duration': 3.942}, {'end': 327.549, 'text': "So that's either a get, post, put, or delete.", 'start': 325.069, 'duration': 2.48}, {'end': 330.03, 'text': 'This just tells the server what they want to do.', 'start': 328.51, 'duration': 1.52}, {'end': 332.371, 'text': 'So a get request is retrieving some data.', 'start': 330.19, 'duration': 2.181}, {'end': 335.372, 'text': 'A post request is making something new on the server.', 'start': 332.731, 'duration': 2.641}, {'end': 343.249, 'text': 'A put request is replacing something if it does exist, like a resource on the server, or creating a new one.', 'start': 336.067, 'duration': 7.182}, {'end': 346.85, 'text': 'And the delete one is deleting a resource on the server.', 'start': 343.909, 'duration': 2.941}], 'summary': 'In the http model, clients specify actions: get, post, put, delete for retrieving, creating, replacing, or deleting data.', 'duration': 26.123, 'max_score': 320.727, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4320727.jpg'}, {'end': 396.967, 'src': 'embed', 'start': 372.295, 'weight': 2, 'content': [{'end': 377.721, 'text': "And I'm just going to show you how you could find these headers and look at what these things look like.", 'start': 372.295, 'duration': 5.426}, {'end': 383.327, 'text': 'So if you open up any web page, like my awesome web page here,', 'start': 378.181, 'duration': 5.146}, {'end': 391.015, 'text': "if you open up the Inspect Tools and go into the Networks tab And then you can have a look down here at all the requests you've made to the server.", 'start': 383.327, 'duration': 7.688}, {'end': 396.967, 'text': 'And if you can click on that, you can look in greater detail at what the request is actually doing.', 'start': 391.857, 'duration': 5.11}], 'summary': 'Demonstrate how to use inspect tools to analyze web page requests.', 'duration': 24.672, 'max_score': 372.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4372295.jpg'}, {'end': 500.477, 'src': 'embed', 'start': 473.83, 'weight': 1, 'content': [{'end': 480.016, 'text': 'And so we invented this technology known as AJAX, which stands for asynchronous JavaScript and XML.', 'start': 473.83, 'duration': 6.186}, {'end': 486.774, 'text': 'And so what this allowed us to do is asynchronously send data to the server after the initial request.', 'start': 481.269, 'duration': 5.505}, {'end': 491.919, 'text': 'So as you can see with the model, the client sends the initial request for the HTML page.', 'start': 486.975, 'duration': 4.944}, {'end': 493.541, 'text': 'It gets responded with that.', 'start': 492.56, 'duration': 0.981}, {'end': 496.424, 'text': 'And then it can continue to make requests after that.', 'start': 493.941, 'duration': 2.483}, {'end': 500.477, 'text': 'And that did a lot of cool things for us.', 'start': 499.016, 'duration': 1.461}], 'summary': 'Invented ajax technology for asynchronous data transfer, enabling multiple requests after initial one.', 'duration': 26.647, 'max_score': 473.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4473830.jpg'}, {'end': 613.479, 'src': 'heatmap', 'start': 569.504, 'weight': 0, 'content': [{'end': 578.666, 'text': "okay?. What if I've got something like a feed or a Facebook feed or a chat application right where I want users to be able to instantly, in real time,", 'start': 569.504, 'duration': 9.162}, {'end': 580.447, 'text': 'be able to talk to each other?', 'start': 578.666, 'duration': 1.781}, {'end': 589.149, 'text': 'okay?. Imagine if, say, a Facebook wall or a chat required you to press get all posts to see the posts of your friends.', 'start': 580.447, 'duration': 8.702}, {'end': 597.791, 'text': "You wouldn't want to be able to sit there the whole time pressing get all posts the whole day looking for new things.", 'start': 590.789, 'duration': 7.002}, {'end': 604.77, 'text': "I'm sorry.", 'start': 604.349, 'duration': 0.421}, {'end': 610.596, 'text': "But you get the point, right? You don't want to sit there the whole day pressing Get All Posts.", 'start': 607.412, 'duration': 3.184}, {'end': 613.479, 'text': 'But if you did, I guess it would work.', 'start': 610.676, 'duration': 2.803}], 'summary': 'Real-time communication feature for social media, avoiding manual post retrieval.', 'duration': 43.975, 'max_score': 569.504, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4569504.jpg'}], 'start': 320.727, 'title': 'Http, web page headers, and web technology evolution', 'summary': 'Covers http request methods (get, post, put, delete) and headers, inspecting web page headers through inspect tools, and the evolution of web technologies including the transition to ajax. it emphasizes benefits and limitations, providing a comprehensive understanding of these key concepts.', 'chapters': [{'end': 371.394, 'start': 320.727, 'title': 'Http request methods and headers', 'summary': 'Explains the http request methods including get, post, put, and delete, their purpose and how they are communicated through headers.', 'duration': 50.667, 'highlights': ['Clients in the HTTP model use request methods such as GET, POST, PUT, and DELETE to specify their action, with these methods being included in the header sent over the web.', 'The GET request retrieves data, the POST request creates something new on the server, the PUT request replaces or creates a resource, and the DELETE request removes a resource from the server.']}, {'end': 447.608, 'start': 372.295, 'title': 'Inspecting web page headers', 'summary': 'Explains how to inspect web page headers using the inspect tools in the networks tab, including viewing requests, responses, and headers in detail.', 'duration': 75.313, 'highlights': ["You can open up any web page, access the Inspect Tools, and go into the Networks tab to view all the requests made to the server, providing a detailed look at the requests' actions.", 'The server responded with a 200 OK response, indicating a valid response, and returned specific data, allowing for a detailed examination of the request and response headers.', 'The chapter demonstrates where to locate and examine web page headers using the Inspect Tools, emphasizing the importance of understanding this type of data for web work.']}, {'end': 620.066, 'start': 447.97, 'title': 'Evolution of web technologies', 'summary': 'Discusses the evolution of web technologies, focusing on the transition from traditional server-client model to ajax, enabling asynchronous data exchange and real-time capabilities, with an emphasis on its benefits and limitations.', 'duration': 172.096, 'highlights': ['AJAX technology was invented to enable asynchronous data exchange, allowing the client to send requests after the initial request, leading to real-time capabilities and eliminating the need to refresh the page. In 2005, AJAX technology was introduced to facilitate asynchronous data exchange, enabling real-time capabilities and eliminating the need to refresh the page, thus enhancing user experience.', 'The traditional server-client model was limited in its ability to provide real-time interactions, as demonstrated with the example of a Facebook feed or chat application. The traditional server-client model was limited in providing real-time interactions, as exemplified by the inconvenience of constantly refreshing to retrieve new data, making it unsuitable for real-time applications like chat or social media feeds.', 'AJAX allowed for a range of new capabilities, such as making requests to the server for additional data without page refresh, enhancing user experience and functionality. AJAX technology enabled a range of new capabilities, including making requests to the server for additional data without requiring page refresh, thereby enhancing user experience and functionality.']}], 'duration': 299.339, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4320727.jpg', 'highlights': ['The traditional server-client model was limited in providing real-time interactions, as exemplified by the inconvenience of constantly refreshing to retrieve new data, making it unsuitable for real-time applications like chat or social media feeds.', 'AJAX technology enabled a range of new capabilities, including making requests to the server for additional data without requiring page refresh, thereby enhancing user experience and functionality.', 'The chapter demonstrates where to locate and examine web page headers using the Inspect Tools, emphasizing the importance of understanding this type of data for web work.', 'Clients in the HTTP model use request methods such as GET, POST, PUT, and DELETE to specify their action, with these methods being included in the header sent over the web.', 'The GET request retrieves data, the POST request creates something new on the server, the PUT request replaces or creates a resource, and the DELETE request removes a resource from the server.']}, {'end': 933.531, 'segs': [{'end': 708.244, 'src': 'embed', 'start': 662.518, 'weight': 0, 'content': [{'end': 668.961, 'text': 'WebSockets is built to solve that inherent problem with HTTP and to develop that dual channel.', 'start': 662.518, 'duration': 6.443}, {'end': 677.485, 'text': 'So what WebSockets does is it defines this fully duplex, bi-directional communication channel between the client and the server.', 'start': 669.441, 'duration': 8.044}, {'end': 679.405, 'text': "I know that's a whole lot of jargon,", 'start': 677.925, 'duration': 1.48}, {'end': 686.188, 'text': 'but pretty much it means that the client and the server can talk in real time without having to continuously make requests.', 'start': 679.405, 'duration': 6.783}, {'end': 697.287, 'text': 'What it does is if you want to do WebSockets over the web, you send a header to the server saying, OK, I want to upgrade from HTTP to WebSockets.', 'start': 687.93, 'duration': 9.357}, {'end': 702.821, 'text': 'And it uses that same TCP connection that it originally established, loading the page.', 'start': 698.919, 'duration': 3.902}, {'end': 705.643, 'text': "And the server's like, OK, let's upgrade.", 'start': 703.562, 'duration': 2.081}, {'end': 708.244, 'text': "Once this upgrade's done,", 'start': 706.603, 'duration': 1.641}], 'summary': 'Websockets enables real-time communication between client and server, avoiding continuous requests.', 'duration': 45.726, 'max_score': 662.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4662518.jpg'}, {'end': 852.02, 'src': 'heatmap', 'start': 801.739, 'weight': 5, 'content': [{'end': 811.005, 'text': 'And if we look at the WebSockets headers, which you can find by going in this little tab, you can see this initial header.', 'start': 801.739, 'duration': 9.266}, {'end': 813.026, 'text': "So I'll just quickly.", 'start': 812.205, 'duration': 0.821}, {'end': 815.987, 'text': 'Drag that open.', 'start': 815.307, 'duration': 0.68}, {'end': 824.409, 'text': 'OK So you see the initial headers which happened with that upgrade connection.', 'start': 816.347, 'duration': 8.062}, {'end': 829.99, 'text': "So you can see the status code from the server was, OK, we're going to switch protocols to WebSockets.", 'start': 824.429, 'duration': 5.561}, {'end': 844.654, 'text': 'And so if you want to look further into, please be reasonable.', 'start': 839.313, 'duration': 5.341}, {'end': 852.02, 'text': 'Did I just see a drop tables? OK.', 'start': 848.459, 'duration': 3.561}], 'summary': 'Websockets headers show server switching protocols, with status code ok.', 'duration': 28.251, 'max_score': 801.739, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4801739.jpg'}, {'end': 913.403, 'src': 'embed', 'start': 888.913, 'weight': 4, 'content': [{'end': 895.514, 'text': 'So I made an event on my client saying add to wall, which does what it says, and it just adds that text to the wall.', 'start': 888.913, 'duration': 6.601}, {'end': 897.935, 'text': 'And you can see the data that came with it.', 'start': 896.135, 'duration': 1.8}, {'end': 903.076, 'text': 'So you have the username of the person that sent it and the message that came with it as well.', 'start': 898.255, 'duration': 4.821}, {'end': 909.699, 'text': "And this probably isn't the best implementation of it, but it sort of just defines that connection.", 'start': 904.514, 'duration': 5.185}, {'end': 913.403, 'text': "OK, so we'll go away from that.", 'start': 909.719, 'duration': 3.684}], 'summary': "Created 'add to wall' event for client, displaying user and message data.", 'duration': 24.49, 'max_score': 888.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4888913.jpg'}], 'start': 621.428, 'title': 'Websockets and server communication', 'summary': 'Explores websockets as a real-time communication solution, enabling fully duplex bi-directional communication, reducing continuous request overhead, and showcasing server communication features including upgrading connections, data exchange, inspecting headers, and event monitoring.', 'chapters': [{'end': 751.487, 'start': 621.428, 'title': 'Websockets: real-time communication solution', 'summary': 'Explains how websockets provide a fully duplex, bi-directional communication channel between client and server, allowing real-time data exchange and reducing the overhead of continuous requests, which is particularly useful for chat applications.', 'duration': 130.059, 'highlights': ['WebSockets provide a fully duplex, bi-directional communication channel between client and server, enabling real-time data exchange without continuous requests. This highlights the key feature of WebSockets and its advantage of real-time communication without the need for continuous requests.', 'WebSockets reduce the overhead of continuous requests by sending headers only once in the initial handshake for upgrading from HTTP to WebSockets. This emphasizes the performance benefit of WebSockets by minimizing the overhead of request headers, contributing to better efficiency.', 'WebSockets are standardized and have been available for quite a while, making them easy to implement and widely applicable. This highlights the ease of implementation and the widespread availability of WebSockets due to standardization, emphasizing its practicality.']}, {'end': 933.531, 'start': 751.747, 'title': 'Understanding websockets in server communication', 'summary': 'Explains the process of using websockets for server communication, including upgrading the connection, sending and receiving data, inspecting headers, and monitoring events, with a demonstration of how messages are saved and sent back to the client.', 'duration': 181.784, 'highlights': ['The process of using WebSockets for server communication is explained, including upgrading the connection, sending and receiving data, inspecting headers, and monitoring events. The chapter provides an overview of the process of using WebSockets for server communication, covering aspects such as upgrading the connection, sending and receiving data, inspecting headers, and monitoring events.', 'Demonstration of how messages are saved and sent back to the client is shown, including the event of adding a message to the wall, along with the associated username and message. The chapter demonstrates the process of saving and sending messages back to the client, including the specific event of adding a message to the wall, along with the associated username and message.', 'Explanation and display of the WebSockets headers and frames are provided, indicating the initial headers, status code, and the data being received from the server. The chapter explains and displays the WebSockets headers and frames, including the initial headers, status code indicating the switch to WebSockets, and the data being received from the server.']}], 'duration': 312.103, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4621428.jpg', 'highlights': ['WebSockets provide a fully duplex, bi-directional communication channel between client and server, enabling real-time data exchange without continuous requests.', 'WebSockets reduce the overhead of continuous requests by sending headers only once in the initial handshake for upgrading from HTTP to WebSockets.', 'WebSockets are standardized and have been available for quite a while, making them easy to implement and widely applicable.', 'The process of using WebSockets for server communication is explained, including upgrading the connection, sending and receiving data, inspecting headers, and monitoring events.', 'Demonstration of how messages are saved and sent back to the client is shown, including the event of adding a message to the wall, along with the associated username and message.', 'Explanation and display of the WebSockets headers and frames are provided, indicating the initial headers, status code, and the data being received from the server.']}, {'end': 1450.466, 'segs': [{'end': 971.33, 'src': 'embed', 'start': 936.691, 'weight': 0, 'content': [{'end': 945.728, 'text': 'Anyway, A lot of people criticize WebSockets for its browser support, and we can now go ahead and say that that is sort of a myth,', 'start': 936.691, 'duration': 9.037}, {'end': 953.877, 'text': 'because WebSockets is widely supported now in all of the latest versions of the browsers, including IE, which is good, I guess,', 'start': 945.728, 'duration': 8.149}, {'end': 954.698, 'text': 'if you still support that.', 'start': 953.877, 'duration': 0.821}, {'end': 962.346, 'text': "And if you want to do further reading and find these sorts of things for other things, I'd urge you to go to this website, caniuse.com.", 'start': 955.603, 'duration': 6.743}, {'end': 967.568, 'text': "Most web developers who've done any front end stuff would probably interface with that.", 'start': 963.366, 'duration': 4.202}, {'end': 971.33, 'text': "But it's just a nice little way of seeing if you can use it.", 'start': 967.608, 'duration': 3.722}], 'summary': 'Websockets now widely supported in latest browser versions, including ie.', 'duration': 34.639, 'max_score': 936.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4936691.jpg'}, {'end': 1065.209, 'src': 'embed', 'start': 1034.348, 'weight': 4, 'content': [{'end': 1037.109, 'text': 'Now, this is still, I think, widely used today from what I can see.', 'start': 1034.348, 'duration': 2.761}, {'end': 1042.953, 'text': "And if you look at a lot of applications where you'd expect WebSockets to be used, like, for example, a chat,", 'start': 1037.51, 'duration': 5.443}, {'end': 1046.055, 'text': "you'll often see that you won't be able to inspect any WebSockets headers.", 'start': 1042.953, 'duration': 3.102}, {'end': 1049.557, 'text': "And that's because people still do use this long polling technique.", 'start': 1046.234, 'duration': 3.323}, {'end': 1053.62, 'text': 'You might have also heard this referred to as comment programming.', 'start': 1050.437, 'duration': 3.183}, {'end': 1060.625, 'text': 'But essentially what it does is it makes a request to the server, and it tells the server not to close that request until it has any new data.', 'start': 1054.24, 'duration': 6.385}, {'end': 1065.209, 'text': 'So it keeps that connection open until the server finds something to give it.', 'start': 1061.586, 'duration': 3.623}], 'summary': 'Long polling technique is still widely used in applications like chat, keeping server connections open until new data is found.', 'duration': 30.861, 'max_score': 1034.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf41034348.jpg'}, {'end': 1262.568, 'src': 'embed', 'start': 1240.777, 'weight': 2, 'content': [{'end': 1249.321, 'text': 'is often quite hard with the WebSocket protocol and it makes the whole implementation of deployment a little bit more complicated than just doing a HTTP server.', 'start': 1240.777, 'duration': 8.544}, {'end': 1256.325, 'text': 'And so the intended use case for WebSockets is generally things where you need that full duplex client-server interaction.', 'start': 1250.622, 'duration': 5.703}, {'end': 1262.568, 'text': "So it's things where you're doing things in real time, like creating maybe a game on the web, chatting applications,", 'start': 1256.685, 'duration': 5.883}], 'summary': 'Websockets protocol adds complexity to deployment, ideal for real-time interactions like gaming and chatting applications.', 'duration': 21.791, 'max_score': 1240.777, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf41240777.jpg'}, {'end': 1346.686, 'src': 'embed', 'start': 1319.617, 'weight': 5, 'content': [{'end': 1325.819, 'text': "And so clients which interface with WebSockets aren't necessarily web browsers like we'd expect,", 'start': 1319.617, 'duration': 6.202}, {'end': 1331.441, 'text': 'but the most popular implementation of these clients are built in JavaScript and are used as web clients.', 'start': 1325.819, 'duration': 5.622}, {'end': 1336.109, 'text': 'And obviously they require the server to be able to interface with WebSockets.', 'start': 1332.884, 'duration': 3.225}, {'end': 1346.686, 'text': "If a client tries to request an upgrade with a server that doesn't support it, it'll obviously respond with an error and you won't get that upgrade.", 'start': 1337.371, 'duration': 9.315}], 'summary': 'Websockets clients are mostly built in javascript, used as web clients, and require server support.', 'duration': 27.069, 'max_score': 1319.617, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf41319617.jpg'}], 'start': 936.691, 'title': 'Websockets and browser support', 'summary': 'Discusses the wide support for websockets in latest browser versions, including ie, debunking the myth of poor browser support. it also covers alternative real-time technologies such as polling, long polling, and server-sent events, their use cases, advantages, and drawbacks in comparison to websockets.', 'chapters': [{'end': 971.33, 'start': 936.691, 'title': 'Websockets browser support', 'summary': 'Discusses the wide support for websockets in the latest browser versions, including ie, debunking the myth of poor browser support. it also mentions caniuse.com as a resource for further information on browser support for web technologies.', 'duration': 34.639, 'highlights': ['WebSockets widely supported in latest browser versions, including IE.', 'Debunks the myth of poor browser support for WebSockets.', 'Recommends caniuse.com as a resource for checking browser support for web technologies.']}, {'end': 1450.466, 'start': 974.52, 'title': 'Websockets and related technologies', 'summary': 'Discusses alternative real-time technologies such as polling, long polling, and server-sent events, their use cases, advantages, and drawbacks in comparison to websockets, also outlining the intended use case and clients used to interface with websockets.', 'duration': 475.946, 'highlights': ['WebSockets is not a complete replacement for HTTP but an upgrade, providing full duplex client-server interaction for real-time applications. WebSockets provides full duplex client-server interaction for real-time applications, and it is not a complete replacement for HTTP but an upgrade.', 'The chapter discusses alternative real-time technologies such as polling, long polling, and server-sent events, their use cases, advantages, and drawbacks in comparison to WebSockets. The chapter discusses alternative real-time technologies such as polling, long polling, and server-sent events, their use cases, advantages, and drawbacks in comparison to WebSockets.', 'Clients used to interface with WebSockets are built in various languages, including Python and JavaScript, and are commonly used for web clients, IoT devices, and other real-time applications. Clients used to interface with WebSockets are built in various languages, including Python and JavaScript, and are commonly used for web clients, IoT devices, and other real-time applications.']}], 'duration': 513.775, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf4936691.jpg', 'highlights': ['WebSockets widely supported in latest browser versions, including IE.', 'Debunks the myth of poor browser support for WebSockets.', 'WebSockets provides full duplex client-server interaction for real-time applications.', 'Recommends caniuse.com as a resource for checking browser support for web technologies.', 'The chapter discusses alternative real-time technologies such as polling, long polling, and server-sent events, their use cases, advantages, and drawbacks in comparison to WebSockets.', 'Clients used to interface with WebSockets are built in various languages, including Python and JavaScript, and are commonly used for web clients, IoT devices, and other real-time applications.']}, {'end': 1759.536, 'segs': [{'end': 1479.278, 'src': 'embed', 'start': 1451.952, 'weight': 1, 'content': [{'end': 1456.98, 'text': "Another thing I want to also mention, and it's sort of the main thing I want to push at you guys to use.", 'start': 1451.952, 'duration': 5.028}, {'end': 1465.01, 'text': "this is a nicer way of interfacing with WebSocket servers, because it's sort of like a jQuery to JavaScript.", 'start': 1456.98, 'duration': 8.03}, {'end': 1471.134, 'text': "So it's sort of like this library that takes the native web sockets and makes it a lot nicer and easier to use.", 'start': 1465.07, 'duration': 6.064}, {'end': 1475.076, 'text': 'And so it includes things like auto reconnection and fallbacks.', 'start': 1471.494, 'duration': 3.582}, {'end': 1479.278, 'text': "So, say a server and a client don't agree on the handshake.", 'start': 1475.256, 'duration': 4.022}], 'summary': 'Promoting a websocket library for easier usage, with features like auto reconnection and fallbacks.', 'duration': 27.326, 'max_score': 1451.952, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf41451952.jpg'}, {'end': 1610.065, 'src': 'embed', 'start': 1572.913, 'weight': 0, 'content': [{'end': 1575.915, 'text': 'Sorry, this is actually an example for native WebSockets.', 'start': 1572.913, 'duration': 3.002}, {'end': 1578.916, 'text': "So this is where you're using that native connection.", 'start': 1577.095, 'duration': 1.821}, {'end': 1582.797, 'text': 'And then SocketIO is where you can do custom events.', 'start': 1579.496, 'duration': 3.301}, {'end': 1587.72, 'text': "And so this namespace allows me to address a group of people, let's say the namespace PyCon.", 'start': 1583.058, 'duration': 4.662}, {'end': 1590.461, 'text': 'So I get all the people to connect to this namespace PyCon,', 'start': 1588.1, 'duration': 2.361}, {'end': 1595.503, 'text': "and then I can send messages back and forth to anyone that's connected to that PyCon namespace,", 'start': 1590.461, 'duration': 5.042}, {'end': 1597.604, 'text': 'which is really quite cool for managing groups of people.', 'start': 1595.503, 'duration': 2.101}, {'end': 1600.625, 'text': "So let's say you've got chat groups, you can use this namespace to achieve that.", 'start': 1597.644, 'duration': 2.981}, {'end': 1610.065, 'text': 'And also, like I was saying before, the performance comparison between WebSockets and just HTTP is quite big.', 'start': 1603.401, 'duration': 6.664}], 'summary': 'Using socketio for custom events and managing groups, achieving better performance than http.', 'duration': 37.152, 'max_score': 1572.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf41572913.jpg'}, {'end': 1656.823, 'src': 'embed', 'start': 1633.404, 'weight': 2, 'content': [{'end': 1642.256, 'text': "But then there's also that socket IO idea from before also does contribute to adding latency to that WebSockets, but it's not as much as HTTP might.", 'start': 1633.404, 'duration': 8.852}, {'end': 1646.182, 'text': "I'm going to quickly go to a speed test if I can.", 'start': 1643.758, 'duration': 2.424}, {'end': 1649.537, 'text': 'This is just on my local host.', 'start': 1648.496, 'duration': 1.041}, {'end': 1655.021, 'text': 'And what it does is I enter a number of requests I want it to perform.', 'start': 1649.797, 'duration': 5.224}, {'end': 1656.823, 'text': 'And it just does that.', 'start': 1655.742, 'duration': 1.081}], 'summary': 'Socket io adds less latency than http to websockets, demonstrated through a speed test on local host.', 'duration': 23.419, 'max_score': 1633.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf41633404.jpg'}], 'start': 1451.952, 'title': 'Websocket benefits and usage', 'summary': 'Emphasizes the benefits of websocket libraries, including auto reconnection and fallback mechanisms, and discusses using socketio for custom event handling, which offers significant performance improvement over native websockets and compares websockets vs. http in terms of speed and deployment complexities.', 'chapters': [{'end': 1497.405, 'start': 1451.952, 'title': 'Websockets library benefits', 'summary': 'Emphasizes the benefits of using a websocket library, including features like auto reconnection, fallback mechanism for older browsers, and the ability to create namespaces, providing a more user-friendly and compatible interface.', 'duration': 45.453, 'highlights': ['The library provides auto reconnection and fallback mechanism for older browsers, enhancing the user experience and ensuring compatibility.', 'It allows the creation of namespaces, which is a valuable feature for organizing and managing WebSocket connections.', 'The library simplifies the interface with WebSocket servers, making it more user-friendly and akin to using jQuery for JavaScript.']}, {'end': 1610.065, 'start': 1497.405, 'title': 'Using socketio for custom event handling', 'summary': 'Discusses the ease of using socketio to create custom events and namespaces, enabling the sending of messages to specific groups of clients, with support for python servers and flask, offering a significant performance improvement over native websockets.', 'duration': 112.66, 'highlights': ['SocketIO allows the creation of custom events and namespaces, enabling the sending of messages to specific groups of clients, such as chat groups, offering a significant performance improvement over native WebSockets.', 'Flask can be easily integrated with SocketIO by wrapping the app with the provided socket object and creating a route for custom event handling, making it straightforward for those familiar with Flask.', 'The performance comparison between WebSockets and just HTTP is quite significant, highlighting the efficiency and speed of using SocketIO for managing groups of people and custom event handling.', 'Native WebSockets can only send events to a message event on the server, whereas SocketIO allows the definition of custom events for more versatile communication, demonstrating the enhanced functionality of SocketIO over native WebSockets.']}, {'end': 1759.536, 'start': 1611.126, 'title': 'Websockets vs. http: speed and deployment', 'summary': 'Explores the efficiency of websockets over http, demonstrating its lower latency through a speed test and discussing the additional complexity of deploying websockets with asynchronous servers.', 'duration': 148.41, 'highlights': ['WebSockets demonstrate lower latency compared to HTTP, as shown in a speed test on the local host.', 'Deploying WebSockets adds an extra layer of complexity, while using asynchronous servers makes the process easier.', 'HTTP requests are heavier, with multiple kilobytes, while WebSockets use a lighter two-byte header frame for subsequent requests.']}], 'duration': 307.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8ARodQ4Wlf4/pics/8ARodQ4Wlf41451952.jpg', 'highlights': ['SocketIO allows the creation of custom events and namespaces, offering significant performance improvement over native WebSockets.', 'The library provides auto reconnection and fallback mechanism for older browsers, enhancing user experience and ensuring compatibility.', 'WebSockets demonstrate lower latency compared to HTTP, as shown in a speed test on the local host.', 'The performance comparison between WebSockets and just HTTP is quite significant, highlighting the efficiency and speed of using SocketIO for managing groups of people and custom event handling.']}], 'highlights': ['WebSockets provide a fully duplex, bi-directional communication channel between client and server, enabling real-time data exchange without continuous requests.', 'WebSockets reduce the overhead of continuous requests by sending headers only once in the initial handshake for upgrading from HTTP to WebSockets.', 'The chapter aims to provide an introduction to WebSockets for beginners who have heard of it but have not used it in their projects.', 'WebSockets are standardized and have been available for quite a while, making them easy to implement and widely applicable.', 'The traditional server-client model was limited in providing real-time interactions, as exemplified by the inconvenience of constantly refreshing to retrieve new data, making it unsuitable for real-time applications like chat or social media feeds.', 'SocketIO allows the creation of custom events and namespaces, offering significant performance improvement over native WebSockets.', 'WebSockets demonstrate lower latency compared to HTTP, as shown in a speed test on the local host.', 'WebSockets widely supported in latest browser versions, including IE.', 'The library provides auto reconnection and fallback mechanism for older browsers, enhancing user experience and ensuring compatibility.', 'Comparison between TCP and UDP in the context of data packet transfer.']}