WebSocket长连接

最新推荐文章于 2024-09-27 09:15:53 发布
最新推荐文章于 2024-09-27 09:15:53 发布
阅读量9k 收藏 5
点赞数
分类专栏： Python 文章标签： websocket django python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61970162/article/details/121909348
版权

WebSocket长连接

1、概述

image-20211111155015888

image-20211111155202002

1.1 定义

image-20211111160606614

1.2 原理

image-20211111162538141

2、Django中配置WebSocket

2.1安装第三方法包
  • pip install channels
2.2 Django 中的配置
  • Settings中的配置
    INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01.apps.App01Config',
    'channels',#注册APP
]
  • 添加配置
    • 定位到Django3中的asgi.py下的application
    ASGI_APPLICATION = "djangoWS.asgi.application"
    • 修改asgy.py文件
    • 默认只支持http协议，修改其内容使得即支持HTTP又要支持WebSocket;
    import os

from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter,URLRouter
from . import routing

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'djangoWS.settings')
# 默认只支持http请求
# application = get_asgi_application()

application=ProtocolTypeRouter({
    "http":get_asgi_application(),
    "websocket":URLRouter(routing.websocket_urlpatterns),
})

  • 在Settings.py的同级目录下，创建routing.py;

    # -*- coding: utf-8 -*-
'''
@Time    : 2021/11/12 9:00
@Author  : ziqingbaojian
@File    : routing.py
'''

from django.urls import re_path
from app01 import consumers

websocket_urlpatterns=[
    re_path(r'ws/(?P<group>\w+)/$',consumers.ShowNum.as_asgi())
]

  • 在app01下创建consumers.py,编写处理事务的逻辑。

    # -*- coding: utf-8 -*-
'''
@Time    : 2021/11/12 9:11
@Author  : ziqingbaojian
@File    : consumers.py
'''
from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer


# 继承WebsocketConsumer
class ShowNum(WebsocketConsumer):
    def websocket_connect(self, message):
        # 有客户端来向后端发送WebSocket连接请求时，自动触发
        # 允许客户端的连接
        self.accept()
        # raise StopConsumer()# 不创建连接，直接使用raise将异常抛出；

    def websocket_receive(self, message):
        # 基于WebSocket想后端发送数据，自动触发接收数据
        # 接收到前端传回的消息
        self.send("不要回答，不要回答，不要回答")

    def websocket_disconnect(self, message):
        # 客户端与服务端断开连接时，自动触发
        raise StopConsumer()
2.3 django中需要了解的
  • wsgi：django3以前django属于同步的，wsgi是处理Socket
  • asgi : 相当于wsgi+异步+WebSocket

  • 普通启动，默认使用的是wsgi**

    image-20211112093454845

  • 基于asgi/channels启动

    image-20211112093744090

3、聊天室

  • 访问到地址界面，http请求

  • 让客户端向服务端主动发送websocket连接，服务端收到连接后（握手）。

    • 前端
    //websocket的协议，发送数据要带ws相当于，http请求以http开头一样；
socket= new WebSocket("ws://127.0.0.1:8001/ws/123/")
    • 服务端
    from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer

# 继承WebsocketConsumer
class ShowNum(WebsocketConsumer):
    def websocket_connect(self, message):
        # 有客户端来向后端发送WebSocket连接请求时，自动触发
        # 允许客户端的连接(握手)
        print("连接来拉")
        self.accept()
        '''两次请求，连接一次握手一次'''
        # raise StopConsumer()# 不创建连接，直接使用raise将异常抛出；
3.1 收发消息( 客户端–>服务端)
  • 客户端
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            height: 300px;
            width: 100%;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="top"></div>
<input type="text" placeholder="请输入" id="txt">
<button onclick="sendMessage()">发送</button>
<script>
    //websocket的协议，发送数据要带ws相当于，http请求以http开头一样；
    socket= new WebSocket("ws://127.0.0.1:8001/ws/123/")
    function sendMessage(){
        var tag=document.getElementById("txt");
        socket.send(tag.value);
    }
</script>
</body>
</html>
  • 服务端
    # -*- coding: utf-8 -*-
'''
@Time    : 2021/11/12 9:11
@Author  : ziqingbaojian
@File    : consumers.py
'''
from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer

# 继承WebsocketConsumer
class ShowNum(WebsocketConsumer):

    def websocket_receive(self, message):
        # 基于WebSocket想后端发送数据，自动触发接收数据
        # 接收到前端传回的消息
        print(message)
        self.send("不要回答，不要回答，不要回答")

    image-20211112102841586

3.2 收发消息（服务端–>客户端）
  • 服务端
    from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer


# 继承WebsocketConsumer
class ShowNum(WebsocketConsumer):
    def websocket_connect(self, message):
        # 有客户端来向后端发送WebSocket连接请求时，自动触发
        # 允许客户端的连接(握手)
        print("连接来拉")
        self.accept()
        '''两次请求，连接一次握手一次'''
        # raise StopConsumer()# 不创建连接，直接使用raise将异常抛出；
        # 服务端给客户端发送消息
        self.send("来了呀，哈哈哈")
  • 客户端
    <script>
    //websocket的协议，发送数据要带ws相当于，http请求以http开头一样；
    socket= new WebSocket("ws://127.0.0.1:8001/ws/123/")
    function sendMessage(){
        var tag=document.getElementById("txt");
        socket.send(tag.value);
    }
    //当websocket接收到服务端发送来的消息的时候会自动触发这个函数
    socket.onmessage=function (event){
        console.log(event.data)
    }
    
</script>
3.2 前端补充回调函数
<script>
	//创建好连接之后自动触发（服务端执行完（self.accpet()之后会立即执行）
    socket.onopen=function(event){
        let tag= document.createElement("div");
        tag.innerText="连接成功"；
        document.getElementById("top").appendChild(tag);
    }
    //连接成功之后进行提示
</script>
3.3 关闭连接
  • 客户端主动关闭
    • 客户端
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            height: 300px;
            width: 100%;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="top"></div>
<input type="text" placeholder="请输入" id="txt">
<button onclick="sendMessage()">发送</button>
<button onclick="closeConn()">关闭连接</button>



<script>
    //websocket的协议，发送数据要带ws相当于，http请求以http开头一样；
    socket= new WebSocket("ws://127.0.0.1:8001/ws/123/")
    function sendMessage(){
        var tag=document.getElementById("txt");
        socket.send(tag.value);
    }

    //当websocket接收到服务端发送来的消息的时候会自动触发这个函数
    socket.onmessage=function (event){
        console.log(event.data)
    }
    function closeConn(){
        socket.close();//向服务端发送断开连接的请求
    }
</script>
</body>
</html>
    • 服务端
    # -*- coding: utf-8 -*-
from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer

# 继承WebsocketConsumer
class ShowNum(WebsocketConsumer):

    def websocket_disconnect(self, message):
        # 客户端与服务端断开连接时，自动触发
        print("断开连接了")
        raise StopConsumer()
  • 服务端主动关闭连接
    • 服务端
    from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer


# 继承WebsocketConsumer
class ShowNum(WebsocketConsumer):


    def websocket_receive(self, message):
        # 基于WebSocket想后端发送数据，自动触发接收数据
        # 接收到前端传回的消息
        print(message)
        text=message['text']
        print(text)
        self.send("不要回答，不要回答，不要回答")
        if text=="close":
            # 法一
            self.close()# 会触发前端的onCllose方法；
            return # 不在执行后期的代码
            # 法二
            # raise StopConsumer()# 如果服务端断开连接时，执行了StopConsumer异常，那么websocket_disconnect方法不在执行;
    • 客户端
    <script>
    //websocket的协议，发送数据要带ws相当于，http请求以http开头一样；
    socket= new WebSocket("ws://127.0.0.1:8001/ws/123/")
    function sendMessage(){
        var tag=document.getElementById("txt");
        socket.send(tag.value);
    }
    //服务端主动断开连接的时候会被触发
    socket.onclose=function (event){
        console.log("连接已断开")
    }
</script>
3.4 整合代码示例
  • 服务端
    from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer

# 继承WebsocketConsumer
class ShowNum(WebsocketConsumer):
    def websocket_connect(self, message):
        # 有客户端来向后端发送WebSocket连接请求时，自动触发
        # 允许客户端的连接(握手)
        print("连接来拉")
        self.accept()
        '''两次请求，连接一次握手一次'''
        # raise StopConsumer()# 不创建连接，直接使用raise将异常抛出；
        # 服务端给客户端发送消息
        self.send("来了呀，哈哈哈")

    def websocket_receive(self, message):
        # 基于WebSocket想后端发送数据，自动触发接收数据
        # 接收到前端传回的消息
        print(message)
        text=message['text']
        print(text)
        self.send("不要回答，不要回答，不要回答")
        if text=="close":
            # 法一
            self.close()# 会触发前端的onCllose方法；
            return # 不在执行后期的代码
            # 法二
            # raise StopConsumer()# 如果服务端断开连接时，执行了StopConsumer异常，那么websocket_disconnect方法不在执行;
    def websocket_disconnect(self, message):
        # 客户端与服务端断开连接时，自动触发,包括关闭页面与浏览器的情况
        print("断开连接了")
        raise StopConsumer()
  • 客户端
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            height: 300px;
            width: 100%;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="top"></div>
<input type="text" placeholder="请输入" id="txt">
<button onclick="sendMessage()">发送</button>
<button onclick="closeConn()">关闭连接</button>
<script>
    //websocket的协议，发送数据要带ws相当于，http请求以http开头一样；
    socket= new WebSocket("ws://127.0.0.1:8001/ws/123/")
    function sendMessage(){
        var tag=document.getElementById("txt");
        socket.send(tag.value);
    }
    //服务端主动断开连接的时候会被触发
    socket.onclose=function (event){
        console.log("连接已断开")
    }

    //当websocket接收到服务端发送来的消息的时候会自动触发这个函数
    socket.onmessage=function (event){
        console.log(event.data)
    }
    function closeConn(){
        socket.close();//向服务端发送断开连的请求
    }
</script>
</body>
</html>
3.5 群聊功能
  • 配置django中的配置文件或者，自定义设置连接池

4 、vue中使用Webscoket

  • 参考文献1：https://www.cnblogs.com/niuben/p/14607900.html

  • 参考文献2 :https://www.cnblogs.com/qisi007/p/10213886.html

  • 方法一
    <template>
  <div class="test">

  </div>
</template>

<script>
  export default {
    name : 'test',
    data() {
      return {
        websock: null,
      }
    },
    created() {
      this.initWebSocket();
    },
    destroyed() {
      this.websock.close() //离开路由之后断开websocket连接
    },
    methods: {
      initWebSocket(){ //初始化weosocket
        if()
        const wsuri = "ws://127.0.0.1:8080";
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        let actions = {"test":"12345"};
        this.websocketsend(JSON.stringify(actions));
      },
      websocketonerror(){//连接建立失败重连
        this.initWebSocket();
      },
      websocketonmessage(e){ //数据接收
        const redata = JSON.parse(e.data);
      },
      websocketsend(Data){//数据发送
        this.websock.send(Data);
      },
      websocketclose(e){  //关闭
        console.log('断开连接',e);
      },
    },
  }
</script>
<style lang='less'>
 
</style>
  • 方法二
    <template>
    <div>
        <button @click="send">发消息</button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            path:"ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5",
            socket:""
        }
    },
    mounted () {
        // 初始化
        this.init()
    },
    methods: {
        init: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                this.socket = new WebSocket(this.path)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open: function () {
            console.log("socket连接成功")
        },
        error: function () {
            console.log("连接错误")
        },
        getMessage: function (msg) {
            console.log(msg.data)
        },
        send: function () {
            this.socket.send(params)
        },
        close: function () {
            console.log("socket已经关闭")
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
}
</script>

<style>

</style>
紫青宝剑
关注
专栏目录
Android 实现WebSocket长连接
04-01
Android 实现WebSocket长连接 最近项目中引入了实时接收服务器数据的功能，考量后通过WebSocket长链接来实现。 1、建立在 TCP 协议之上，服务器端的实现比较容易。 2、与 HTTP 协议有着良好的兼容性。默认端口也是80...
WebSocket 长连接
sekever的博客
04-13 2923
WebSocket 是一种网络传输协议，可在单个 TCP 连接上进行全双工通信，位于 OSI 模型的应用层早期，很多网站为了实现推送技术，所用的技术都是轮询（也叫短轮询）。轮询是指由浏览器每隔一段时间向服务器发出 HTTP 请求，然后服务器返回最新的数据给客户端。常见的轮询方式分为轮询与长轮询在这种情况下，HTML5 定义了 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
单工，半双工和全双工有何区别和联系？
weixin_30421809的博客
08-02 285
单工数据传输只支持数据在一个方向上传输；在同一时间只有一方能接受或发送信息，不能实现双向通信，举例：电视，广播。 半双工数据传输允许数据在两个方向上传输,但是,在某一时刻,只允许数据在一个方向上传输,它实际上是一种切换方向的单工通信；在同一时间只可以有一方接受或发送信息，可以实现双向通信。举例：对讲机。 3.全双工数据通信允许数据同时在两个方向上传输,因此...
不止WebSocket可以实现长连接，它也可以
最新发布
LuckyWinty的博客
09-27 76
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群前言首先听到服务端消息推送一般大多数可能都是使用到的websocket,但是websocket一般主要是用于聊天室，而SSE（Server-Sent Events)也是可以基于服务器来与Web页面来进行数据和消息的推送的，但是与websocket不同的是，服务器发送事件是单项的，数据只能从服务端发送到客户端。例如我们可以看一下常用的chat...
Vue+WebSocket 实现页面实时刷新长连接
weixin_43550660的博客
11-25 8731
Vue+WebSocket 实现页面实时刷新长连接 知乎链接 最近vue项目要做数据实时刷新，折线图每秒重画一次，数据每0.5秒刷新一次，说白了就是实时刷新，因为数据量较大，用定时器估计页面停留一会就会卡死。。。 与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示 一、WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支...
WebSocket使用-长连接
qq_46344419的博客
07-12 1990
WebSocket使用
一篇文章带你创建快速稳定的WebSocket长链接
qq_41765777的博客
12-05 1405
WebSocket基础使用、心跳检测、断网重连、全局注册。在一个完善的即时信息应用中，WebSocket是极其关键的一环，它为基于Web的即时通讯应用提供了一种全双工的通信机制。但为了提升实际应用场景下的消息即时性和可靠性，我们需要克服WebSocket及其底层依赖的TCP连接对于复杂网络情况下的不稳定性，即时通讯的开发者们通常都需要为其设计一套完整的连接保活、验活以及断片网重连方案。就断网重连而言，其重连响应速度将严重影响了上层应用的“即时性”和用户体验。
SpringBoot集成WebSocket长连接实际应用详解
08-19
SpringBoot集成WebSocket长连接实际应用详解 本文主要介绍了SpringBoot集成WebSocket长连接实际应用详解，通过示例代码详细介绍了WebSocket的应用场景和实现方式，对大家的学习或者工作具有一定的参考学习价值。 ...
java与微信小程序实现websocket长连接
08-26
在微信小程序中，可以使用wx.connectSocket()方法来建立WebSocket连接，具体示例代码如下： ```javascript wx.connectSocket({ url: 'ws://localhost:8080/websocket', data: { foo: 'bar' }, header: { '...
springboot整合WebSocket长连接
01-09
针对springboot整合websocket实现长连接的实例，包含前后端内容
Python WebSocket长连接心跳与短连接的示例
01-19
先来看一下，长连接调用方式： ws = websocket.WebSocketApp(ws://echo.websocket.org/, on_message = on_message, on_error = on_error, on_close = on_close) ws.on_open = on_open ws.run_forever()  长...
长链接-WebSocket
ZhiguoXue_IT的博客
05-21 1064
马上工作了三年，回想起这三年的工作，和别的部门进行数据交互，一种是通过rpc接口，另一种是通过http接口，获取到自己想要的数据，或者给出自己的数据。在电商的业务场景中，通过设置调用的超时时间来满足一些调用比较慢的服务，所涉及的都是单相工通信。在IM的服务中，有多种业务场景需要客户端和服务端建立长链接，比如说语音转文字，客户端一直在输入语音，客户端和服务端保持通信，一直进行语音转化为文字，这个过程可能持续的时间会很长，此时现有的http协议已经无法满足需求，需要Websocket长链接协议进行解决。
长/短 链接/轮询 和websocket
NHB456789的博客
04-29 2194
短连接：长连接：客户端和服务端之间只有一条TCP通信连接，以后所有的请求都使用这条连接，也称为持久连接。优点：多次请求-响应基于一条连接，避免资源浪费。缺点：客户端的数量增加，服务端承受的压力增大。对每个请求仍然要单独发header，Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。总结：短轮询：长轮询：首先由客户端向服务器发起请求，当服务器收到客户端发来的请求后，服务器端不会直接进行响应，而是先将 这个请求挂起，然后判断服务器端数据是否有更新。
简单介绍与使用webscoket长连接
QQTSS的博客
06-12 1214
WebSockets 是一种先进的技术，它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此 API，可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。WebSockets 这种技术中有一个接口名为WebSocket，它是一个用于连接 WebSocket 服务器的主要接口，之后可以在这个连接上发送和接受数据。接下来的案例则是使用该接口创建一个WebSocket对象来进行管理。
HTML5 WebSocket长连接
low666的博客
03-21 2149
HTML5 WebSocket实现长连接 先介绍一下WebSocket WebSocket的概念 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的...
websocket长连接
xiuxialala的博客
01-05 437
2.新建websocket.js文件。
实现websocket长链接
monkey_xiaoda的博客
03-07 324
nodejs实现websocket长链接
websockets长连接通信介绍与Python、js实现
有勇气的牛排博客
06-27 1761
WebSocket是一种在Web应用程序中实现双向通信的协议。它提供了一种在客户端和服务器之间进行实时数据传输的方式，允许服务器主动向客户端推送消息，而不需要客户端首先发送请求。建立连接：WebSocket连接是通过HTTP升级实现的。客户端首先发送一个HTTP请求，包含特殊的请求头字段，指示要升级到WebSocket协议。服务器接收到这个请求后，如果支持WebSocket，会返回一个HTTP响应，表示升级成功。之后，客户端和服务器之间建立起全双工的WebSocket连接。
socket编程
weixin_46539107的博客
09-25 171
1.Socket网络通信 TCP协议 TCP协议是一种以固定连线为基础的协议，它提供两台计算机见可靠的数据传送。 UDP协议 UDP协议是无连接通信协议，不保证数据的可靠传输，但能够向若干个目标发送数据，或接受来自若干源的数据。 TCP与UDP的区别 1.TCP面向连接，UDP是无连接的，发送数据之前不需要建立连接 2.TCP提供可靠的服务，UDP不保证可靠交付 3.UDP具有较好的实时性，工作效率较高，使用与对告诉传输和实时性有较高的通信 4.每一条TCP连接只能是点到点的，UDP支持一对一，一对多，多对
WebSocket长连接技术：解决HTTP通信痛点
"Websocket长连接技术是一种优化的实时通信技术，旨在解决HTTP协议在处理双向通信时的效率和带宽浪费问题。它基于TCP连接，提供了全双工的通信能力，允许服务器和客户端双向交换数据，从而实现真正的实时交互。这种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值