WebSocket长连接

1、概述

1.1 定义

1.2 原理

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**
基于asgi/channels启动

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("不要回答，不要回答，不要回答")

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>

WebSocket长连接的更多相关文章

当web应用包含了websocket长连接，如何在web应用前加一层nginx转发
1 通过在web应用的前面加一层nginx ,可以实现一台主机部署多个应用,每个应用都可以用不同的域名去访问,并且端口都是80 2 nignx 转发websocket长连接 1 每个web应用,他们运 ...
实现单台测试机6万websocket长连接
本文由作者郑银燕授权网易云社区发布. 本文是我在测试过程中的记录,实现了单台测试机发起最大的websocket长连接数.在一台测试机上,连接到一个远程服务时的本地端口是有限的.根据TCP/IP协议,由 ...
Spring+Stomp+ActiveMq实现websocket长连接
stomp.js+spring+sockjs+activemq实现websocket长连接,使用java配置. pom.xml(只列出除了spring基本依赖意外的依赖,spring-version为 ...
Python WebSocket长连接心跳与短连接
python websocket 安装 pip install websocket-client 先来看一下,长连接调用方式: ws = websocket.WebSocketApp("ws ...
WebSocket 长连接及超时问题解决
<?phpset_time_limit(0); class SocketService { private $address = 'localhost'; private $port = 80; ...
雨露均沾的OkHttp—WebSocket长连接的使用&源码解析
前言最近老板又来新需求了,要做一个物联网相关的app,其中有个需求是客户端需要收发服务器不定期发出的消息. 内心OS:
Django websocket 长连接使用
下载 pip install dwebsocket WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客 ...
微信小程序实现websocket长连接以及断开连接之后自动重连
app.js let socketMsgQueue = [] let isLoading = false App({ globalData: { userInfo: null, localSocket ...
Browser 與 Server 持續同步的作法介紹 (Polling, Comet, Long Polling, WebSocket)长连接
對 Comet 的懵懂記得兩年多前,第一次看到 Gmail 中的 GTalk 覺得很好奇:「咦?線上聊天且是 Google 的熱門系統,只用傳統的 AJAX 應該會操爆伺服器吧?」很幸運的,當時前公 ...

随机推荐

PostgreSQL逻辑订阅
测试环境:PostgreSQL 13.2 1.逻辑订阅简介由于物理复制只能做到这个集群的复制,不能正对某个对象(表)进行复制,且物理复制的备库只能读,不能写.相反,逻辑订阅同时支持主备库读写,且可以 ...
chapter3——逻辑回归手动+sklean版本
1 导入numpy包 import numpy as np 2 sigmoid函数 def sigmoid(x): return 1/(1+np.exp(-x)) demox = np.array([ ...
Linux性能优化实战（一）
一.优化方向 1,性能指标从应用负载的视角出发,考虑"吞吐"和"延时" 从系统资源的视角出发,考虑资源使用率.饱和度等 2,性能优化步骤选择指标评估应用程序 ...
Jackson 的基本用法
Jackson 是当前用的比较广泛的,用来序列化和反序列化 json 的 Java 的开源框架.Jackson 社区相对比较活跃,更新速度也比较快, 从 Github 中的统计来看,Jackson ...
Swift中类的使用
主要内容类的介绍和定义类的属性类的构造函数一. 类的介绍和定义 Swift也是一门面向对象开发的语言面向对象的基础是类,类产生了对象在Swift中如何定义类呢? class是Swift中的 ...
让HTML和JSP页面不缓存从Web服务器上重新获取页面
感谢原文作者:佚名原文链接:https://www.jb51.net/web/100639.html 问题描述用户退出后,如果点击浏览器上的后退按钮,Web应用将不能正确保护受保护的页面--在Se ...
类扩展(Class Extension)
类扩展(Class Extension) 也有人称为匿名分类 - 作用 - 能为某个类增加额外的属性.成员变量.方法声明 - 一般将类扩展写到.m文件中 - 一般将一些私有的属 ...
动态修改UINavigationBar的背景色－－by－胡旭
这是我们最终想要得到的效果思路在UISrollView的delegate方法 - (void)scrollViewDidScroll:(UIScrollView *)scrollView中根据当前 ...
Shell脚本之编程规范和变量
Shell脚本编程规划和变量 1.Shell脚本概述 2.Shell编程规划 3.重定向与管道 4.Shell脚本变量 1.Shell脚本概述 Shell的作用:充当"翻译官"的角 ...
k8s之PV、PVC
目录一.PVC和PV 1.1 PV概念 1.2 PVC概念 1.3 PV与PVC之间的关系 1.4 两种PV的提供方式二.基于nfs创建静态PV资源和PVC资源 2.1 配置nfs存储(192.1 ...

WebSocket长连接

WebSocket长连接

1、概述

1.1 定义

1.2 原理

2、Django中配置WebSocket

2.1安装第三方法包

2.2 Django 中的配置

Settings中的配置

添加配置

2.3 django中需要了解的

wsgi：django3以前django属于同步的，wsgi是处理Socket

asgi : 相当于wsgi+异步+WebSocket

3、聊天室

前端

服务端

3.1 收发消息( 客户端-->服务端)

客户端

服务端

3.2 收发消息（服务端-->客户端）

服务端

客户端

3.2 前端补充回调函数

3.3 关闭连接

客户端主动关闭

服务端主动关闭连接

3.4 整合代码示例

服务端

客户端

3.5 群聊功能

4 、vue中使用Webscoket

方法一

方法二

WebSocket长连接的更多相关文章

随机推荐

热门专题