多人在线聊天室【一】 什么是webSocket🕐
hello,我是肖大侠😎
历经千辛万苦，总算是把一个勉强能聊天的聊天室部署上服务器了...
还没高兴几天，服务器给搞挂了好几次😤
没办法，根本顾不上考虑性能问题，只能先暂时关闭了，
结果因为一些原因，这一扔就是半年，最近我又准备重新部署一次的时候发现完全忘记不会了，😭
踩了很多坑，却没有做什么记录，现在给我的感觉就是...白做了，除了有一些模糊的印象，基本忘了哪些问题该怎么处理了，😵😵😵
所以这次就从头开始，重新做一遍部署一遍，做一个完整的记录✌
这次记录主要分为两个部分：
第一部分主要就是一些基础知识，以及使用vue和python的flask框架在本地实现一个超简易版本的在线聊天室
第二部分就要用python的Django框架实现一个完整功能的聊天室，并且需要部署在服务器上
那就废话不多说，先复习一下什么是webSocket
==最后再再提一嘴，如果有小伙伴打算跟着我一起做，所有依赖的版本最好跟我的一致，至于为什么...都是血泪的教训😰，很多时候你会发现自己的配置完全正确，找不到问题在哪，但是就不能实现通信，那就是依赖版本的问题，在本地这个问题还不明显，上了服务器就是一堆报错==
从TCP/IP四层模型到http协议再到webSocket协议
首先咱们都熟悉http协议。
http协议是基于tcp通信的工作在应用层的协议
webSocket也是一种协议，也基于tcp，也工作在应用层
上图展示了tcp/Ip四层模型的基本内容
现今的web服务，大体上都是客户端，也就是用户使用的浏览器首先和服务器建立TCP连接，执行请求，确认，建立连接三个步骤，即大名鼎鼎的"三次握手"😍
建立TCP连接之后，其实客户端和服务端已经可以收发数据了，但是网络上这么多设备，你用一种方式发送数据，别人又用另一种方式发送数据，这就无法处理了，因此应用层的一些协议应运而生，规范大家使用同样的格式来收发数据
http就是一个非常典型的应用层协议
当浏览器需要从服务端获取数据渲染页面的时候，即发出一次http请求。http通过tcp建立一个可靠的传输通道，发送请求到服务器上。服务器接收到请求随即响应请求，返回数据到浏览器，
重点来了，当客户端，即用户的浏览器拿到本次请求的数据之后，http协议会立即将之前建立的tcp连接断开，一次请求过程是很短的，
==所以，http连接是一种短连接，无状态的连接==
真的就只是这样吗？不不不不，http1.1之后，默认设置长链接keep-alive为true，此时，http是一个长连接的状态，浏览器与服务端建立tcp通道之后，浏览器可以发起多次请求，服务端同时响应多次请求，返回相应的数据，
而不是像之前所说的，每次请求完成都会立即关闭tcp信道。
至此，如果我们只依赖http协议来实现一个聊天室，你会发现依然是有限制的，😡😡😡
聊天和平时浏览网页不同，在同一时间可能会有多个人同时发送消息，这些消息发送到服务器之后，又需要立即推送给聊天室中的其他用户
仔细看上述的http简介，你会发现基于http协议永远只能浏览器去发送请求，服务器才能做响应，不同的用户发消息当然可以看做一次请求，将消息发送到服务器上，
那服务器如何将这些消息推送给用户呢？除非用户再次主动发送请求，来获取服务器上的最新数据
总不能做一个刷新按钮，让用户通过不断点击来更新消息吧？
于是你可能想到写一个循环或者定时器，让浏览器每隔一秒或几秒就发送一次请求，来更新数据，这样做当然可以，
事实上有一些网站为了实现服务器推送，使用的都是这种轮询技术，
但我们也能很明显的感觉到这样做是不妥的，这样不断发送请求的方式导致大量无效数据在浏览器与服务端之间通信，造成带宽的浪费，
当前也有一些新的技术去实现轮询，例如Comet，但这些新的技术依然避免不了浏览器与服务端之间的大量无效通信。😩😩😩
http1.1的这种通信方式，被称为半双工通信。
1、单工通信：数据永远只被允许在一个方向上传输，即永远只能由一方来发送数据，另一方接收数据
2、半双工通信：数据被允许在两个方向上传输，但同一时间内，只能有一方发送数据，另一方接收数据
3、全双工通信：数据在任何时间都被允许在两个方向上传输，双方都可以随时收发数据
聊天室聊天显然是一种全双工的通信方式，使用半双工的http协议虽然也可以实现，但我们有更好的东西，那就是webSocket协议。
==webSocket是一个工作在应用层的，建立在tcp协议之上的全双工通信协议==
⭐⭐⭐⭐⭐重要的说明⭐⭐⭐⭐⭐
我们使用webSocket协议来实现实时通信，是因为webSocket支持长连接，支持全双工的特性，而不是仅仅是为了找一个长连接全双工通信协议选择了它。目前web服务支持全双工的协议非常多，包括http协议，http2.0实质上已经支持了全双工通信，但http2.0并不适合来开发聊天室
注：tcp协议是一个全双工的通信协议
webSocket简介
上文已经提到，WebSocket是一种在单个TCP连接上进行全双工通信的协议。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
webSocket有如下特点：
1、较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。在不包含扩展的情况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度有关）；对于客户端到服务器的内容，此头部还需要加上额外的4字节的掩码。相对于HTTP请求每次都要携带完整的头部，此项开销显著减少了。
2、更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少；即使是和Comet等类似的长轮询比较，其也能在短时间内更多次地传递数据。
3、保持连接状态。与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。
4、更好的二进制支持。Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。
5、可以支持扩展。Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。
6、更好的压缩效果。相对于HTTP压缩，Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率。
😁以上知识均来自百度百科😁
所以webSocket到底是什么呢？它其实和http是兄弟关系，webSocket就是基于http1.1做的。
之前也说了，http是基于tcp工作在应用层的，webSocket也是基于tcp工作的应用层的，那http作为老大哥，已经实现了tcp通道的建立，那我webSocket作为小弟，自然就没有必要再去建立tcp通道了，
webSocket一般是先通过http进行三次握手建立连接，连接建立之后，再告诉服务器，我这不是http通信，而是webSocket通信，等于是做了一次升级
经过一通花里胡哨的操作之后，webSocket连接成功！此时浏览器和服务器之间处于一个可以互相收发消息的状态。
虽然webSocket建立连接的过程是借助http协议的，但连接建立之后，收发请求就不再使用http协议了。
除此之外，有web开发经验的同学可能清楚http协议有一个非常非常头疼的东西，那就是同源策略，跨域问题，
但是webSocket本身是没有跨域限制的（美滋滋儿✨✨✨）
webSocket是真正的全双工通信，建立连接之后客户端与服务端完全平等，相较于旧的轮询技术，极大的节约了资源。
最后，相信你也看到tcp/ip四层模型中存在一个socket抽象层，这其实就是tcp/ip协议提供的一组api，它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用已实现进程在网络中通信。
那webSocket和socket是什么关系？简单来说，
1、webSocket是协议，但socket并不是
2、webSocket工作在应用层，soket是传输层与应用层之间的的一个抽象层，程序员在应用层使用soket api进行编程，它并不是协议
Socket是应用层与TCP/IP协议族通信的中间软件抽象层，它是一组接口。在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面，对用户来说，一组简单的接口就是全部，让Socket去组织数据，以符合指定的协议。
3、简而言之，http和socket是啥关系，webSocket和socket就是啥关系。
框架简介
1、Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js 可以说是MVVM 架构的最佳实践，是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁
2、Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 。Flask使用 BSD 授权。Flask也被称为 “microframework” ，因为它使用简单的核心，用 extension 增加其他功能。Flask没有默认使用的数据库、窗体验证工具。
3、Django是一个开放源代码的Web应用框架，由Python写成。采用了MTV的框架模式，即模型M，视图V和模版T。它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的，即是CMS（内容管理系统）软件。并于2005年7月在BSD许可证下发布。这套框架是以比利时的吉普赛爵士吉他手Django Reinhardt来命名的。
其实也没啥好说的，直接照搬百度百科了。
vue相信做前端的都知道，flask和django是python的web框架，没了😂😂😂😂😂
那这次就先写到这吧，😃😃
拜拜~✋
哦对了，本地环境的聊天室我放在gitee上啦，着急的小伙伴可以先看一下代码，
不过这个东西做的比较急比较仓促，所以代码写的很丑陋，多多包涵😣😣