Web应用的信息交互过程通常是客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端，然后客户端浏览器将信息呈现出来，这种机制对于信息变化不是特别频繁的应用尚能相安无事，但是对于那些实时要求比较高的应用来说，比如说在线游戏、股票查询，在线证券、设备监控、新闻在线播报、RSS订阅推送等等，当客户端浏览器准备呈现这些信息的时候，这些信息在服务器端可能已经过时了。
 

 
 
WebSocket出来的目的就是使得客户端浏览器像C/S架构下，桌面系统的实时通讯能力，浏览器通过JS向服务器发出建立WebSocket请求，链接建立以后，客户端跟服务端就可以通过TCP链连接进行直接交换数据，因此WebSocket实质上就是一个TCP连接
 

 
 
本文根据作者  http://blog.csdn.net/xmtblog/article/details/50905881  这个改写而来 
 

 
 

 

一、什么是WebSocket
 
1、介绍
 
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
 
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
 
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
 
2、握手协议
 
WebSocket 是独立的、创建在 TCP 上的协议。
 
Websocket 通过HTTP/1.1 协议的101状态码进行握手。
 
为了创建Websocket连接，需要通过浏览器发出请求，之后服务器进行回应，这个过程通常称为“握手”（handshaking）
 
 
3、推送优势
 
很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。
 
这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
 
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
 
较少的开销
 
在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。相对于HTTP请求每次都要携带完整的头部，此项开销显著减少了。
 
更强的实时性
 
更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。
 
保持连接状态
 
与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。
 
更好的二进制支持
 
Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。
 
二、WebSocket基础
 
1、常量
 
Constant
Value
WebSocket.CONNECTING
0
WebSocket.OPEN
1
WebSocket.CLOSING
2
WebSocket.CLOSED
3
2、WebSocket属性
 
 
WebSocket.binaryType
 
使用二进制的数据类型连接。
 
 
WebSocket.bufferedAmount 只读
 
未发送至服务器的字节数。
 
 
WebSocket.extensions 只读
 
服务器选择的扩展。
 
 
WebSocket.onclose
 
用于指定连接关闭后的回调函数。
 
 
WebSocket.onerror
 
用于指定连接失败后的回调函数。
 
 
WebSocket.onmessage
 
用于指定当从服务器接受到信息时的回调函数。
 
 
WebSocket.onopen
 
用于指定连接成功后的回调函数。
 
 
WebSocket.protocol 只读
 
服务器选择的下属协议。
 
 
WebSocket.readyState 只读
 
当前的链接状态。
 
 
WebSocket.url 只读
 
WebSocket 的绝对路径。
 
 
这里属性，有一些是事件属性，可以通过事件属性 监听事件
 
onclose onerror onopen onmessage
 
2、WebSocket事件
 
使用 addEventListener() 或将一个事件监听器赋值给本接口的 on*eventname* 属性，来监听下面的事件。
 
 
close (en-US)
 
当一个 WebSocket 连接被关闭时触发。 也可以通过 onclose 属性来设置。
 
 
error
 
当一个 WebSocket 连接因错误而关闭时触发，例如无法发送数据时。 也可以通过 onerror 属性来设置.
 
 
message
 
当通过 WebSocket 收到数据时触发。 也可以通过 onmessage 属性来设置。
 
 
open (en-US)
 
当一个 WebSocket 连接成功时触发。 也可以通过 onopen 属性来设置。
 
总结如下:
 
 
事件
事件处理程序
描述
open
Socket.onopen
连接建立时触发
message
Socket.onmessage
客户端接收服务端数据时触发
error
Socket.onerror
通信发生错误时触发
close
Socket.onclose
连接关闭时触发
3、WebSocket方法
 
方法
描述
Socket.send()
使用连接发送数据
Socket.close()
关闭连接
4、创建WebSocket对象
 
创建 WebSocket 对象。
 
var Socket = new WebSocket(url, [protocol] );
 
var ws = new WebSocket("ws://127.0.0.1:8000/chat")
 
Websocket 使用 ws 或 wss 的统一资源标志符，类似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。如：
 
ws://example.com/wsapi
wss://secure.example.com/
 
Websocket 使用和 HTTP 相同的 TCP 端口，可以绕过大多数防火墙的限制。默认情况下，Websocket 协议使用 80 端口；运行在 TLS 之上时，默认使用 443 端口。
 
5、案例
 
// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});
 
三、服务端websocket
 
1、Channels
 
Channels包装了Django的本机异步视图支持，从而使Django项目不仅可以处理HTTP，还可以处理需要长时间运行的连接的协议-WebSocket，MQTT，(chatbots)聊天机器人，(amateur radio)业余无线电等等。
 
查看官方网站 https://channels.readthedocs.io/en/2.x/
 
2、安装
 
1、下载
 
python -m pip install -U channels
 
使用步骤：
 
第一步 在INSTALLED_APPS中配置
 
INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    ...
    'channels',
)
 
第二步 创建routing.py文件路由
 
from channels.routing import ProtocolTypeRouter

application = ProtocolTypeRouter({
    # Empty for now (http->django views is added by default)
})
 
第三步 修改ASGI_APPLICATION
 
将您的ASGI_APPLICATION设置设置为指向该路由对象作为您的根应用程序：

ASGI_APPLICATION = "myproject.routing.application"
 
第四步 运行测试
 
启用后，channels将自身集成到Django中并控制runserver命令
 
E:\workspace2021\shixun01\resp_2005A\WorkerOrder>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
April 19, 2021 - 16:43:20
Django version 2.2.14, using settings 'WorkerOrder.settings'
Starting ASGI/Channels version 2.4.0 development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

 
报的错误：
 
init() missing 1 required positional argument: 'scope
 
版本问题，目前用的是django 2.2 channels 2.4 则 channels就不能使用3.x的版本方式写代码。
 
查看版本 在左下角 可以选择 文档版本 去查看 应该在2.4的版本下怎么写
 
https://channels.readthedocs.io/en/2.x/
 
3、名词
 
Channels和ASGI 把 进来的连接 分为两个部分：scope作用域、一系列的事件。
 
在连接的声明周期内，发生了一系列事件，代表用户交互。
 
消费者： 就是用来处理消息的意思，这里的消费者 类似于视图处理http请求，是通信消息处理函数。
 
3.1 使用域scope
 
customer 在scope初始化时会受到连接的信息，其中包含request在Django视图中的信息。
 
常见使用
 
scope[‘path’] 请求中的路径
 
scope[“headers”] 请求中的原始键值对头
 
scope[“method”] 请求中的方法名称
 
路径中取参数
 
url_route': {'args': (), 'kwargs': {'r_name':'hello'}}}
 
则取参数格式是:
 
self.scope["url_route"]["kwargs"]["r_name"]
 
路径后带参数
 
'query_string': b'age=30&key=22'
 
则取参数格式是
 

 
4、案例：
 
4.1、编写消费者Customer
 
1、引入
 
当Django接受HTTP请求时，它会查询根URLconf来查找视图函数，然后调用该视图函数来处理该请求。
 
同样，当Channels接受WebSocket连接时，它会查询根路由配置以查找使用者，然后在使用者上调用各种功能以处理来自连接的事件。
 
2、第一步 编写customer
 
chat/views.py中 编写了 ChatCustomer类
 
from channels.generic.websocket import WebsocketConsumer


class ChatCustomer(WebsocketConsumer):
    def connect(self):
        # 监听
        self.accept()

    def disconnect(self, code):
        pass

    def receive(self, text_data):
        # 获得客户端1发送来的消息
        print(text_data)
        # 处理消息

        # 把消息在发送给客户端1
        self.send("hello")
 
3、 第二步 定义路由
 
在chat中创建routing文件
 
from django.urls import path
from .views import *

websocket_urlpatterns = [
    path("chat/", ChatCustomer)
]

 
4、 第三步 主路由
 
在 和 settings.py同目录下的routing文件中 配置子路由
 
from channels.routing import ProtocolTypeRouter
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
import chat.routing

application = ProtocolTypeRouter({
    # Empty for now (http->django views is added by default)
    # (http->django views is added by default)
    'websocket': AuthMiddlewareStack(
        URLRouter(
            chat.routing.websocket_urlpatterns
        )
    ),
})

 
4.2、vue端编写WebSocket
 
export default {
   data(){
       return {
          msg_list:[],
          content:"",
          ws:null,
       }
   },
   methods:{
       send_msg(){
           this.ws.send(this.content)
       },
       initWebSocket(){
            this.ws = new WebSocket("ws://127.0.0.1:8000/chat/")
           
            this.ws.onopen=this.webonopen

            this.ws.onmessage=this.webonmessage

            this.ws.onclose=this.webonclose
       },
       webonopen(event){
           console.log("=====建立连接成功====")
           console.log(event)
       },
       webonmessage(event){
           console.log("=====接收传递来的数据=====")
           console.log(event)
           this.msg_list.push(event.data)
       },
       webonclose(event){
           console.log("======关闭连接==========")
       }
       
       
   },
   created(){
       this.initWebSocket()
   }
 
# 展示操作

<div>
        <div style="width:500px;">
            <el-input type="textarea" v-model="content"></el-input>
            <el-button type="primary" @click="send_msg">发送</el-button>
        </div>
        <div style="height:300px;">
            <h3>接收信息:</h3>
            <p v-for="(i,index) in msg_list" :key="index">{{i}}</p>
        </div>
   </div>
 
四、进阶
 
1、新名词
 
channel layer 信道层 是一个通信系统。允许多个customer实例相互通信，还能与django的其他部分通信
 
从信道层 抽取两个部分:
 
channel信道
 
消息可以发送到信道,每一个信道都有名字，可以根据名字发送信息到信道
 
group 组
 
相关联的一组channel信道。一个组有名字，组内可以添加、删除一个信道。可以发送信息到所有组内的信道。但是 不支持组内枚举可用的信道。
 
2、 使用信道层
 
2.1、下载
 
使用Redis作为信道层的台存数据库。
 
pip install channels_redis
 
2.2、配置
 
在settings中配置CHANNEL_LAYERS
 
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('127.0.0.1', 6379)],
        },
    },
}
 
可以配置多个信道层，但是大部分项目只需要一个信道层
 
还能与django的其他部分通信
 
从信道层 抽取两个部分:
 
channel信道
 
消息可以发送到信道,每一个信道都有名字，可以根据名字发送信息到信道
 
group 组
 
相关联的一组channel信道。一个组有名字，组内可以添加、删除一个信道。可以发送信息到所有组内的信道。但是 不支持组内枚举可用的信道。
 
2、 使用信道层
 
2.1、下载
 
使用Redis作为信道层的台存数据库。
 
pip install channels_redis
 
2.2、配置
 
在settings中配置CHANNEL_LAYERS
 
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('127.0.0.1', 6379)],
        },
    },
}
 
可以配置多个信道层，但是大部分项目只需要一个信道层

websocket
 
1：与http协议的区别
 
 
 
1：http(一问一答)协议只能是客户端主动给服务器发送
 2：websocket(消息推送)协议弥补了这个缺点，在连接成功建立后，不管是服务端还是客户端都可以主动的向对方发送消息
 
 
2：使用：
 服务端(java代码)
 
 
 
1：创建类的时候，使用serverEndpoint注解来修饰，指定一个路径，作为跟前端进行交互的
 2：创建方法(实现类的一些方法)：
 a)：onOpen：建立连接时调用
 b)：onClose：关闭连接时调用
 c)：onMessage：收到消息的时进行调用
 d)：onError：触发异常时进行调用
 3：通过对应的注解来修饰指定的方法
 注意： 以上的四个方法是不需要程序员的主动调用
 4：session.getBasicRemote().sendText()：把一个文本数据写回浏览器(客户端)该方法 需要程序员的主动调用，只要连接建立好，调用这个方法就能写回数据，无须客户端先发送请求
 
 
客户端(js)
 
 
 
1：创建WebSocket对象
 var websocket = new WebSocket(“ws://127.0.0.1:8080/chatroom/websocketTest”);
 通过指定的url和服务器发起了连接，虽然url写的是ws://，此时是发送的是一个http请求；服务器收到这个ws://这个http请求之后，会返回一个101 状态码(切换高级协议：我同意)的响应报文，并且在header中加上一个叫一个upgrade这样的字段，表示协议要升级成websocket协议；要想顺利升级协议，必须保证，浏览器和服务器都能支持websocket，现代的浏览器一般都支持的，如果不支持的话，在new websocket的时候就会抛出异常，就不会发送http请求
 2：给WebSocket对象注册一些方法：
 a)：onopen：建立连接是调用
 b)：onclose：断开连接是调用
 c)：onmessage：收到消息是调用
 d)：onError：异常时调用
 3：websocket.send()：给服务器发送数据
 
 
3：应用场景
 websocket是一种常用的协议(消息推送)，在线聊天(在线客服)，网页游戏(打开浏览器就能玩)
 
4：顺道jdbc
 建立连接数据的工具类时，一般使用的是懒汉模式加上双重校验(因为考虑线程安全)
 
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

/*
* 1:功能：帮助我们管理连接。DBUtil本质上是实现了DataSource类的单例版本
* 2:对于一个应用程序来说，DataSource只需要有一个实例(正好就可以使用我们的单例模式)就可以了。
* 3:单例模式是面试中最常考的设计模式
* 4:饿汉模式比较简单，但是懒汉模式比较常考一些
* 5:注意线程安全问题
*   5.1:合适的位置加锁
*   5.2:双重if判断
*   5.3:volatile*/
public class DBUtil {
    private static final String URL="jdbc:mysql://127.0.0.1:3306/chatroom?character=utf-8&useSSL=true";//useSSL加密连接
    private static final String USERNAME="root";
    private static final String PASSWORD="";
    private static volatile DataSource dataSource=null;

    //建立连接：
    public static DataSource getDataSource(){
        //获取到这个单例的DataSource实例
        if(dataSource==null) {//只要实例创建好了之后，我们就不用再竞争锁了
            synchronized (DBUtil.class) {
                if (dataSource == null) {
                    dataSource = new MysqlDataSource();
                    //new一个DataSource的实例

                    //必须要告诉代码，数据库是谁，以啥样的方式登录上去
                    /*这里是存在一个向下转型的，因为原本的DataSource是无法进行设置URL，User等的
                    * 1：DataSource是java标准库中的类，这个类烤炉到个或者那个数据库的情况
                    * (因为有的数据库是不用进行设置用户名密码的)
                    * 2：DataSource并不负责具体如何和对应的数据库连接，
                    * 这个事情都交给子类(数据库驱动)MysqlDataSource来完成*/
                    ((MysqlDataSource)dataSource).setURL(URL);
                    ((MysqlDataSource)dataSource).setUser(USERNAME);
                    ((MysqlDataSource)dataSource).setPassword(PASSWORD);
                }
            }
        }
        return dataSource;
    }

    //获取连接：
    /*1：和数据库建立连接，本质上mysql是一个“客户端，服务器”结构，
    2：数据库的本体就是服务器(数据库的存储和管理都是在服务器端完成的)
    3：咱们现在写的jdbc代码，本质上就是实现一个客户端用来连接mysql服务器
    4：mysql也是通过TCP协议进行通信的，所以要进行建立连接(应用层协议的连接(基于TCP的)(所以说首先的进行tcp连接))过程中，
        其中有一个环节会(TCP的三次握手)的操作
    5：如果建立连接失败的话，getConnection就会抛出异常，根据异常信息来确定问题的原因*/
    public static Connection getConnection(){
        try {
            return getDataSource().getConnection();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        //如果出现异常，获取不到连接直接返回null
        return null;
    }

    public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){
        try {
            if(resultSet!=null){
                resultSet.close();
            }
            if(statement!=null){
                statement.close();
            }
            if(connection!=null){
                connection.close();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

一、为什么你们项目组中使用WebSocket技术
 当我们在处理页面数据自动更新的时候，在使用js不断的请求服务器，查看是否有新数据，如果有就获取到新数据，进行对页面信息的跟新，但是当页面长时间没有更新数据时，这样就会存在资源浪费的情况，所以才会使用WebSocket来解决。
 
二、UDP和TCP协议的概念
 TCP是事先为所发送的数据开辟出连接好的通道，然后再进行数据发送；而UDP则不为IP提供可靠性、流控或差错恢复功能。一般来说，TCP对应的是可靠性要求高的应用，而UDP对应的则是可靠性要求低、传输经济的应用。
 
三、什么是WebSocket？
 WebSocket是HTML5一种新的协议，WebSocket是真正实现了全双工通信的服务器向客户端推的互联网技术，是一种在单个TCP连接上进行全双工通讯协议。
 
四、全双工通讯协议的概念？
 全双工是通讯传输的一个术语。通信允许数据在两个方向上同时传输，他在能力上相当于两个单工通信方式的结合。全双工指可以同时进行信号的双向传输。
 
全双工是：例如我们使用的手机就是全双工，在同一时刻两个用户可以同时给对方传送数据
 
半双工：例如我们使用的对讲机，当A方按住通话按钮才可以向B方传送数据，B方也是，在同一时刻只有一个用户能够传送数据（A/用户都可以传递信息，但是不能够同时传递）
 
单工：例如我们看电视时，我们只能接收对方发送的信息，不能够给对方传递信息；
 
五、WebSocket和Socket的区别是什么？
 Socket是应用层与TCP/IP协议通信的中间软件抽象层，它是一组接口。而WebSocket则不同，它是一个完整的应用层协议，包含一套标准的API。
 
六、Http与WebSocket的区别？
 http协议是短链接，因为请求之后，都会关闭连接，下次重新请求数据，需要再次打开连接。WebSocket协议是一种长连接，只需要通过一次请求来初始化链接，然后所有的请求和响应都是通过这个TCP链接进行通信。
 
七、WebSocket中的常用注解有哪些？
 @ServerEndpoint 类似与servlet中的 RequestMapping
 
@OnOpen类似与servlet中的 init（）初始化
 
@OnClose类似与servlet中的destroy() 销毁
 
@OnMessage类似于servlet中的service请求 （意思就是发送数据的方式 @doPost() / @doGet() 组合）*