目录

1.种植园使用websocket代替http

2.服务端基于socket提供服务

3.服务端响应信息

4.种植园页面展示

1.种植园使用websocket代替http

我们需要完成的种植园，是一个互动频繁，并且要求有一定即时性的模块，所以如果继续基于http协议开发，那么需要通过ajax发送大量http请求，同时因为http本身属于单向通讯，所以服务端无法主动发送信息提供给客户端。所以对于客户端使用来说，非常不友好，所以我们需要基于socket通讯来完成这个模块的开发。当然，如果我们服务端基于socket实现tcp/ip通讯的同时，那么客户端必须也要使用websocket来实现tcp/ip通讯才能正常运作。

1.websocket协议简介

文档：https://tools.ietf.org/html/rfc6455

一直以来，HTTP是无状态、单向通信的网络协议，即客户端请求一次，服务器回复一次，默认情况下，只允许浏览器向服务器发出请求后，服务器才能返回相应的数据。如果想让服务器消息及时下发到客户端，需要采用类似于轮询的机制，大部分情况就是客户端通过定时器使用ajax频繁地向服务器发出请求。这样的做法效率很低，而且HTTP数据包头本身的字节量较大，浪费了大量带宽和服务器资源。

为了提高效率，HTML5推出了WebSocket技术。

WebScoket是一种让客户端和服务器之间能进行全双工通信(full-duplex)的技术。它是HTML最新标准HTML5的一个协议规范，本质上是个基于TCP的协议，它通过HTTP/HTTPS协议发送一条特殊的请求进行握手后创建了一个TCP连接，此后浏览器/客户端和服务器之间便可随时随地以通过此连接来进行双向实时通信，且交换的数据包头信息量很小。

同时为了方便使用，HTML5提供了非常简单的操作就可以让前端开发者直接实现socket通讯，开发者只需要在支持WebSocket的浏览器中，创建Socket之后，通过onopen、onmessage、onclose、onerror四个事件的实现即可处理Socket的响应。

注意：websocket是HTML5技术的一部分，但是websocket并非只能在浏览器或者HTML文档中才能使用，事实上在python或者C++等语言中只要能实现websocket协议报文，均可使用。

导读：https://blog.csdn.net/zhusongziye/article/details/80316127

客户端报文

  1. GET /mofang/websocket HTTP/1.1
  2. Host: 127.0.0.1
  3. Origin: http://127.0.0.1:5000
  4. Upgrade: websocket
  5. Connection: Upgrade
  6. Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==      # Sec-WebSocket-Key 是随机生成的
  7. Sec-WebSocket-Version: 13

服务端报文

  1. HTTP/1.1 101 Switching Protocols
  2. Upgrade: websocket
  3. Connection: Upgrade
  4. Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= # 结合客户端提供的Sec-WebSocket-Key基于固定算法计算出来的
  5. Sec-WebSocket-Protocol: chat

2.WebSocket与Socket的关系

他们两的关系就像Java和JavaScript，并非完全没有关系，只能说有点渊源。

Socket严格来说，其实并不是一个协议，而是为了方便开发者使用TCP或UDP协议而对TCP/IP协议进行封装出来的一组接口，是位于应用层和传输控制层之间的接口。通过Socket接口，我们可以更简单，更方便的使用TCP/IP协议。

WebSocket是实现了浏览器与服务器的全双工通信协议，一个模拟Socket的应用层协议。

2.服务端基于socket提供服务

1.安装并配置flask-socketio

在python中实现socket服务端的方式有非常多，一种最常用的有python-socketio，而我们现在使用的flask框架也有一个基于python-socket模块进行了封装的flask-socketio模块.

官方文档：https://flask-socketio.readthedocs.io/en/latest/

注意:

因为目前还有会存在一小部分的设备或者应用是不支持websocket的.所以为了保证功能的可用性,我们使用socektio,但是由此带来了2个问题,必须要注意的:

  1. python服务端使用基于socketio进行通信服务,则另一端必须也是基于socetio来进行对接通信,否则无法进行通信

  2. socketio还有一个版本对应的问题, 版本不对应则无法通信.回报版本错误.

    如果使用了javascript io 1.x或者2.x版本,则python-socketio或者flask-socketio的版本必须是4.x

    如果使用了javascriptio 3.x版本,则python-socketio或者flask-socketio的版本必须是5.x.

我们当前使用的flask-socketio版本是5.x,所以javasctipt的socketio版本就必须是3.x.

终端下执行命令，安装：

  1. pip install flask-socketio
  2. pip install gevent-websocket

模块初始化，application/__init__.py，代码：

  1. from flask_socketio import SocketIO
  2.  
  3. # socketio
  4. socketio = SocketIO()
  5.  
  6. def init_app(config_path):
  7.     """全局初始化"""
  8.  
  9.     # socketio
  10.     socketio.init_app(app, cors_allowed_origins=app.config["CORS_ALLOWED_ORIGINS"],async_mode=app.config["ASYNC_MODE"], debug=app.config["DEBUG"])
  11.     # 改写runserver命令
  12.     if sys.argv[1] == "runserver":
  13.         manager.add_command("run", socketio.run(app,host=app.config["HOST"],port=app.config["PORT"]))

配置文件,application/settings/dev.py,代码:

  1.     # socketio
  2.     CORS_ALLOWED_ORIGINS="*"
  3.     ASYNC_MODE=None
  4.     HOST="0.0.0.0"
  5.     PORT=5000

application/utils/__init__.py，在加载蓝图的过程中，自动加载socket服务端的api，代码：

  1. def init_blueprint(app):
  2.     """自动注册蓝图"""
  3.         ......
  4.         # 加载蓝图内部的socket接口
  5.         try:
  6.             import_module(blueprint_path+".socket")
  7.         except:
  8.             pass

2.客户端引入socket.io.js

因为我们是基于python-socketio模块提供的服务端，所以客户端必须基于socketIO.js才能与其进行通信，所以客户端引入socketio.js。

socket.io.js的官方文档: https://socket.io/docs/v3

socket.io.js的github: https://github.com/socketio/socket.io/releases

我们可以新建一个orchard.html作为将来种植园模块的主页面，并在这个页面中使用socketio和服务端的flask-socketIO进行通信。

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script type="text/javascript" src="../static/js/socket.io.js"></script>
  7. </head>
  8. <body>
  9.  
  10. <script>
  11.     // 命名空间
  12.     namespace = '/mofang';
  13.     var socket = io.connect('ws://192.168.20.251:5000' + namespace, {transports: ['websocket']});
  14.     // socket.on('connect', function() {
  15.     //     console.log("客户端连接socket服务端");
  16.     // });
  17. </script>
  18. </body>
  19. </html>

3.服务端创建orchard蓝图

服务端创建并注册蓝图目录orchard，终端命令如下：

  1. cd application/apps/
  2. python ../../manage.py blue -n=orchard

application/urls.py，代码：

  1. from application.utils import include
  2. urlpatterns = [
  3.     include("","home.urls"),
  4.     include("/users","users.urls"),
  5.     include("/marsh","marsh.urls"),
  6.     include("/orchard","orchard.urls"),

applicaion/settings/dev.py，代码:

  1.     # 注册蓝图
  2.     INSTALLED_APPS = [
  3.         "application.apps.home",
  4.         "application.apps.users",
  5.         "application.apps.marsh",
  6.         "application.apps.orchard",
  7.     ]

4.创建socket连接

在蓝图下面创建socket.py文件，并提供连接接口, orchard/socket.py：

  1. from application import socketio
  2. from flask import request
  3. @socketio.on("connect", namespace="/mofang")
  4. def user_connect():
  5.     # request.sid socketIO基于客户端生成的唯一会话ID
  6.     print("用户%s连接过来了!" % request.sid)
  7.  
  8. @socketio.on("disconnect", namespace="/mofang")
  9. def user_disconnect():
  10.     print("用户%s退出了种植园" % request.sid )

5.客户端vue结合socketio

1.orchard.html

orchard.html客户端代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>用户中心</title>
  5.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  6.     <meta charset="utf-8">
  7.     <link rel="stylesheet" href="../static/css/main.css">
  8.     <script src="../static/js/vue.js"></script>
  9.     <script src="../static/js/axios.js"></script>
  10.     <script src="../static/js/main.js"></script>
  11.     <script src="../static/js/uuid.js"></script>
  12.     <script src="../static/js/settings.js"></script>
  13.     <script src="../static/js/socket.io.js"></script>
  14. </head>
  15. <body>
  16.     <div class="app orchard" id="app">
  17.     <img class="music" :class="music_play?'music2':''" @click="music_play=!music_play" src="../static/images/player.png">
  18.     <div class="orchard-bg">
  19.             <img src="../static/images/bg2.png">
  20.             <img class="board_bg2" src="../static/images/board_bg2.png">
  21.         </div>
  22.     <img class="back" @click="go_index" src="../static/images/user_back.png" alt="">
  23.  
  24.     </div>
  25.     <script>
  26.     apiready = function(){
  27.         init();
  28.         new Vue({
  29.             el:"#app",
  30.             data(){
  31.                 return {
  32.           music_play:true,
  33.           namespace: '/mofang_orchard',
  34.           token:"",
  35.           socket: null,
  36.           timeout: 0,
  37.                     prev:{name:"",url:"",params:{}},
  38.                     current:{name:"orchard",url:"orchard.html",params:{}},
  39.                 }
  40.             },
  41.       created(){
  42.         this.checkout();
  43.  
  44.       },
  45.             methods:{
  46.         checkout(){
  47.           var token = this.game.get("access_token") || this.game.fget("access_token");
  48.           this.game.checkout(this,token,(new_access_token)=>{
  49.             this.connect();
  50.           });
  51.         },
  52.         connect(){
  53.           // socket连接
  54.           this.socket = io.connect(this.settings.socket_server + this.namespace, {transports: ['websocket']});
  55.           this.socket.on('connect', ()=>{
  56.               this.game.print("开始连接服务端");
  57.           });
  58.         },
  59.         go_index(){
  60.           this.game.outWin("orchard");
  61.         },
  62.             }
  63.         });
  64.     }
  65.     </script>
  66. </body>
  67. </html>

2.orchard的CSS样式

css样式，main.css，代码：

  1. .app .orchard-bg{
  2.     margin: 0 auto;
  3.     width: 100%;
  4.     max-width: 100rem;
  5.     position: absolute;;
  6.     z-index: -1;
  7.   top: -6rem;
  8. }
  9. .app .orchard-bg .board_bg2{
  10.   position: absolute;
  11.   top: 1rem;
  12. }
  13. .orchard .back{
  14.     position: absolute;
  15.     width: 3.83rem;
  16.     height: 3.89rem;
  17.   z-index: 1;
  18.   top: 2rem;
  19.   left: 2rem;
  20. }
  21. .orchard .music{
  22.   right: 2rem;
  23. }
  24. .orchard .header{
  25.   position: absolute;
  26.   top: 0rem;
  27.   left: 0;
  28.   right: 0;
  29.   margin: auto;
  30.   width: 32rem;
  31.   height: 19.28rem;
  32. }
  33.  
  34. .orchard .info{
  35.   position: absolute;
  36.   z-index: 1;
  37.   top: 0rem;
  38.   left: 4.4rem;
  39.   width: 8rem;
  40.   height: 9.17rem;
  41. }
  42. .orchard .info .avata{
  43.   width: 8rem;
  44.   height: 8rem;
  45.   position: relative;
  46. }
  47. .orchard .info .avatar_bf{
  48.   position: absolute;
  49.   z-index: 1;
  50.   margin: auto;
  51.   width: 6rem;
  52.   height: 6rem;
  53.   top: 0;
  54.   bottom: 0;
  55.   left: 0;
  56.   right: 0;
  57. }
  58. .orchard .info .user_avatar{
  59.   position: absolute;
  60.   z-index: 1;
  61.   width: 6rem;
  62.   height: 6rem;
  63.   margin: auto;
  64.   top: 0;
  65.   bottom: 0;
  66.   left: 0;
  67.   right: 0;
  68.   border-radius: 1rem;
  69. }
  70. .orchard .info .avatar_border{
  71.   position: absolute;
  72.   z-index: 1;
  73.   margin: auto;
  74.   top: 0;
  75.   bottom: 0;
  76.   left: 0;
  77.   right: 0;
  78.   width: 7.2rem;
  79.   height: 7.2rem;
  80. }
  81. .orchard .info .user_name{
  82.   position: absolute;
  83.   left: 8rem;
  84.   top: 1rem;
  85.   width: 11rem;
  86.   height: 3rem;
  87.   line-height: 3rem;
  88.   font-size: 1.5rem;
  89.   text-shadow: 1px 1px 1px #aaa;
  90.   border-radius: 3rem;
  91.   background: #ff9900;
  92.   text-align: center;
  93. }
  94.  
  95. .orchard .wallet{
  96.   position: absolute;
  97.   top: 3.4rem;
  98.   right: 4rem;
  99.   width: 16rem;
  100.   height: 10rem;
  101. }
  102. .orchard .wallet .balance{
  103.   margin-top: 1.4rem;
  104.   float: left;
  105.   margin-right: 1rem;
  106. }
  107. .orchard .wallet .title{
  108.   color: #fff;
  109.   font-size: 1.2rem;
  110.   width: 6.4rem;
  111.   text-align: center;
  112. }
  113. .orchard .wallet .title img{
  114.   width: 1.4rem;
  115.   margin-right: 0.2rem;
  116.   vertical-align: sub;
  117.   height: 1.4rem;
  118. }
  119. .orchard .wallet .num{
  120.   background: url("../images/btn3.png") no-repeat 0 0;
  121.   background-size: 100%;
  122.   width: 6.4rem;
  123.   font-size: 0.8rem;
  124.   color: #fff;
  125.   height: 2rem;
  126.   line-height: 1.8rem;
  127.   text-indent: 1rem;
  128. }
  129. .orchard .header .menu-list{
  130.   position: absolute;
  131.   top: 9rem;
  132.   left: 2rem;
  133. }
  134. .orchard .header .menu-list .menu{
  135.   color: #fff;
  136.   font-size: 1rem;
  137.   float: left;
  138.   width: 4rem;
  139.   height: 4rem;
  140.   text-align: center;
  141.   margin-right: 2rem;
  142. }
  143. .orchard .header .menu-list .menu img{
  144.   width: 3.33rem;
  145.   height: 3.61rem;
  146.   display: block;
  147.   margin: auto;
  148.   margin-bottom: 0.4rem;
  149. }
  150. .orchard .footer{
  151.   position: absolute;
  152.   width: 100%;
  153.   height: 6rem;
  154.   bottom: -2rem;
  155.   background: url("../images/board_bg3.png") no-repeat -1rem 0;
  156.   background-size: 110%;
  157. }
  158. .orchard .footer .menu-list{
  159.   width: 100%;
  160.   height: 4rem;
  161.   display: flex;
  162.   position: absolute;
  163.   top: -1rem;
  164. }
  165. .orchard .footer .menu-list .menu,
  166. .orchard .footer .menu-list .menu-center{
  167.   float: left;
  168.   width: 4.44rem;
  169.   height: 5.2rem;
  170.   font-size: 1.5rem;
  171.   color: #fff;
  172.   line-height: 4.44rem;
  173.   text-align: center;
  174.   background: url("../images/btn5.png") no-repeat 0 0;
  175.   background-size: 100%;
  176.   flex: 1;
  177.   margin-left: 4px;
  178.   margin-right: 4px;
  179. }
  180. .orchard .footer .menu-list .menu-center{
  181.   background: url("../images/btn6.png") no-repeat 0 0;
  182.   background-size: 100%;
  183.   flex: 2;
  184. }

orchard的CSS样式

6.基于事件接受信息

1.基于未定义事件进行通信

orchard.html客户端代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>用户中心</title>
  5.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  6.     <meta charset="utf-8">
  7.     <link rel="stylesheet" href="../static/css/main.css">
  8.     <script src="../static/js/vue.js"></script>
  9.     <script src="../static/js/axios.js"></script>
  10.     <script src="../static/js/main.js"></script>
  11.     <script src="../static/js/uuid.js"></script>
  12.     <script src="../static/js/settings.js"></script>
  13.     <script src="../static/js/socket.io.js"></script>
  14. </head>
  15. <body>
  16.     <div class="app orchard" id="app">
  17.     <img class="music" :class="music_play?'music2':''" @click="music_play=!music_play" src="../static/images/player.png">
  18.     <div class="orchard-bg">
  19.             <img src="../static/images/bg2.png">
  20.             <img class="board_bg2" src="../static/images/board_bg2.png">
  21.         </div>
  22.     <img class="back" @click="go_index" src="../static/images/user_back.png" alt="">
  23.     </div>
  24.     <script>
  25.     apiready = function(){
  26.         init();
  27.         new Vue({
  28.             el:"#app",
  29.             data(){
  30.                 return {
  31.           music_play:true,
  32.           token:"",
  33.           socket: null,
  34.           timeout: 0,
  35.                     prev:{name:"",url:"",params:{}},
  36.                     current:{name:"orchard",url:"orchard.html",params:{}},
  37.                 }
  38.             },
  39.       created(){
  40.         this.checkout();
  41.       },
  42.             methods:{
  43.         checkout(){
  44.           var token = this.game.get("access_token") || this.game.fget("access_token");
  45.           this.game.checkout(this,token,(new_access_token)=>{
  46.             this.connect();
  47.           });
  48.         },
  49.         connect(){
  50.           // socket连接
  51.           this.socket = io.connect(this.settings.socket_server + this.settings.socket_namespace, {transports: ['websocket']});
  52.           this.socket.on('connect', ()=>{
  53.               this.game.print("开始连接服务端");
  54.               this.login();
  55.           });
  56.         },
  57.         login(){
  58.           var id = this.game.fget("id");
  59.           // ***通过send方法可以直接发送数据,不需要自定义事件,数据格式是json格式***
  60.           this.socket.send({"uid":id});
  61.         },
  62.         go_index(){
  63.           this.game.outWin("orchard");
  64.         },
  65.             }
  66.         });
  67.     }
  68.     </script>
  69. </body>
  70. </html>

基于未定义事件进行通信

服务端orchard/socket.py代码:

  1. from application import socketio
  2. from flask import request
  3.  
  4. # 未定义事件通信，客户端没有指定事件名称
  5. @socketio.on("message",namespace="/mofang")
  6. def user_message(data):
  7.     print("接收到来自%s发送的数据:" % request.sid)
  8.     print(">>>>data:",data)
  9.     print(">>>>uid:"data["uid"])

2.基于自定义事件进行通信

orchard.html客户端代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>用户中心</title>
  5.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  6.     <meta charset="utf-8">
  7.     <link rel="stylesheet" href="../static/css/main.css">
  8.     <script src="../static/js/vue.js"></script>
  9.     <script src="../static/js/axios.js"></script>
  10.     <script src="../static/js/main.js"></script>
  11.     <script src="../static/js/uuid.js"></script>
  12.     <script src="../static/js/settings.js"></script>
  13.     <script src="../static/js/socket.io.js"></script>
  14. </head>
  15. <body>
  16.     <div class="app orchard" id="app">
  17.     <img class="music" :class="music_play?'music2':''" @click="music_play=!music_play" src="../static/images/player.png">
  18.     <div class="orchard-bg">
  19.             <img src="../static/images/bg2.png">
  20.             <img class="board_bg2" src="../static/images/board_bg2.png">
  21.         </div>
  22.     <img class="back" @click="go_index" src="../static/images/user_back.png" alt="">
  23.     </div>
  24.     <script>
  25.     apiready = function(){
  26.         init();
  27.         new Vue({
  28.             el:"#app",
  29.             data(){
  30.                 return {
  31.           music_play:true,
  32.           token:"",
  33.           socket: null,
  34.           timeout: 0,
  35.                     prev:{name:"",url:"",params:{}},
  36.                     current:{name:"orchard",url:"orchard.html",params:{}},
  37.                 }
  38.             },
  39.       created(){
  40.         this.checkout();
  41.       },
  42.             methods:{
  43.         checkout(){
  44.           var token = this.game.get("access_token") || this.game.fget("access_token");
  45.           this.game.checkout(this,token,(new_access_token)=>{
  46.             this.connect();
  47.           });
  48.         },
  49.         connect(){
  50.           // socket连接
  51.           this.socket = io.connect(this.settings.socket_server + this.settings.socket_namespace, {transports: ['websocket']});
  52.           this.socket.on('connect', ()=>{
  53.               this.game.print("开始连接服务端");
  54.               this.login();
  55.           });
  56.         },
  57.         login(){
  58.           var id = this.game.fget("id");
  59.           // **自定义事件用emit提交**
  60.           this.socket.emit("login",{"uid":id});
  61.         },
  62.         go_index(){
  63.           this.game.outWin("orchard");
  64.         },
  65.             }
  66.         });
  67.     }
  68.     </script>
  69. </body>
  70. </html>

基于自定义事件进行通信

服务端orchard/socket.html代码:

  1. from application import socketio
  2. from flask import request
  3.  
  4. # 自定义事件通信
  5. @socketio.on("login", namespace="/mofang")
  6. def user_login(data):
  7.     print("接受来自客户端%s发送的数据:" % request.sid)
  8.     print(data)
  9.     print(data["uid"])

3.服务端响应信息

1.服务端响应信息给客户端

服务端通过socketio.emit将内容响应给客户端

  1. from application import socketio
  2. from flask import request
  3. from application.apps.users.models import User
  4. # 建立socket通信
  5. @socketio.on("connect", namespace="/mofang")
  6. def user_connect():
  7.     # request.sid socketIO基于客户端生成的唯一会话ID
  8.     print("用户%s连接过来了!" % request.sid)
  9.  
  10.     # ***主动响应数据给客户端***
  11.     length = User.query.count()
  12.     socketio.emit("server_response",{"count":length},namespace="/mofang")

客户端接收响应信息,orchard.html代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>用户中心</title>
  5.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  6.     <meta charset="utf-8">
  7.     <link rel="stylesheet" href="../static/css/main.css">
  8.     <script src="../static/js/vue.js"></script>
  9.     <script src="../static/js/axios.js"></script>
  10.     <script src="../static/js/main.js"></script>
  11.     <script src="../static/js/uuid.js"></script>
  12.     <script src="../static/js/settings.js"></script>
  13.     <script src="../static/js/socket.io.js"></script>
  14. </head>
  15. <body>
  16.     <div class="app orchard" id="app">
  17.     <img class="music" :class="music_play?'music2':''" @click="music_play=!music_play" src="../static/images/player.png">
  18.     <div class="orchard-bg">
  19.             <img src="../static/images/bg2.png">
  20.             <img class="board_bg2" src="../static/images/board_bg2.png">
  21.         </div>
  22.     <img class="back" @click="go_index" src="../static/images/user_back.png" alt="">
  23.     </div>
  24.     <script>
  25.     apiready = function(){
  26.         init();
  27.         new Vue({
  28.             el:"#app",
  29.             data(){
  30.                 return {
  31.           music_play:true,
  32.           token:"",
  33.           socket: null,
  34.           timeout: 0,
  35.                     prev:{name:"",url:"",params:{}},
  36.                     current:{name:"orchard",url:"orchard.html",params:{}},
  37.                 }
  38.             },
  39.       created(){
  40.         this.checkout();
  41.       },
  42.             methods:{
  43.         checkout(){
  44.           var token = this.game.get("access_token") || this.game.fget("access_token");
  45.           this.game.checkout(this,token,(new_access_token)=>{
  46.             this.connect();
  47.           });
  48.         },
  49.         connect(){
  50.           // socket连接
  51.           this.socket = io.connect(this.settings.socket_server + this.settings.socket_namespace, {transports: ['websocket']});
  52.           this.socket.on('connect', ()=>{
  53.               this.game.print("开始连接服务端");
  54.               this.login();
  55.               this.get_count();
  56.           });
  57.         },
  58.         // **客户端接受响应信息**
  59.         get_count(){
  60.           this.socket.on("server_response",(res)=>{
  61.             this.game.print(res.count);
  62.             alert(`欢迎来到种植园,当前有${res.count}人在忙碌着~`)
  63.           });
  64.         },
  65.         login(){
  66.           var id = this.game.fget("id");
  67.           this.socket.emit("login",{"uid":id});
  68.         },
  69.         go_index(){
  70.           this.game.outWin("orchard");
  71.         },
  72.             }
  73.         });
  74.     }
  75.     </script>
  76. </body>
  77. </html>

客户端接受响应信息

2.基于房间管理分发信息

  1. from application import socketio
  2. from flask import request
  3. from application.apps.users.models import User
  4. from flask_socketio import join_room, leave_room # ****
  5.  
  6. # 自定义事件通信
  7. @socketio.on("login", namespace="/mofang")
  8. def user_login(data):
  9.     print("接受来自客户端%s发送的数据:" % request.sid)
  10.     print(data)
  11.  
  12.     # ***一般基于用户id分配不同的房间***
  13.     room = data["uid"]
  14.     join_room(room)
  15.     socketio.emit("login_response", {"data": "登录成功"}, namespace="/mofang", room=room)

客户端代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>用户中心</title>
  5.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  6.     <meta charset="utf-8">
  7.     <link rel="stylesheet" href="../static/css/main.css">
  8.     <script src="../static/js/vue.js"></script>
  9.     <script src="../static/js/axios.js"></script>
  10.     <script src="../static/js/main.js"></script>
  11.     <script src="../static/js/uuid.js"></script>
  12.     <script src="../static/js/settings.js"></script>
  13.     <script src="../static/js/socket.io.js"></script>
  14. </head>
  15. <body>
  16.     <div class="app orchard" id="app">
  17.     <img class="music" :class="music_play?'music2':''" @click="music_play=!music_play" src="../static/images/player.png">
  18.     <div class="orchard-bg">
  19.             <img src="../static/images/bg2.png">
  20.             <img class="board_bg2" src="../static/images/board_bg2.png">
  21.         </div>
  22.     <img class="back" @click="go_index" src="../static/images/user_back.png" alt="">
  23.     </div>
  24.     <script>
  25.     apiready = function(){
  26.         init();
  27.         new Vue({
  28.             el:"#app",
  29.             data(){
  30.                 return {
  31.           music_play:true,
  32.           token:"",
  33.           socket: null,
  34.           timeout: 0,
  35.                     prev:{name:"",url:"",params:{}},
  36.                     current:{name:"orchard",url:"orchard.html",params:{}},
  37.                 }
  38.             },
  39.       created(){
  40.         this.checkout();
  41.       },
  42.             methods:{
  43.         checkout(){
  44.           var token = this.game.get("access_token") || this.game.fget("access_token");
  45.           this.game.checkout(this,token,(new_access_token)=>{
  46.             this.connect();
  47.           });
  48.         },
  49.         connect(){
  50.           // socket连接
  51.           this.socket = io.connect(this.settings.socket_server + this.settings.socket_namespace, {transports: ['websocket']});
  52.           this.socket.on('connect', ()=>{
  53.               this.game.print("开始连接服务端");
  54.               this.login();
  55.               this.get_count();
  56.               this.login_response(); //****
  57.           });
  58.         },
  59.         // ****
  60.         login_response(){
  61.           this.socket.on("login_response",(res)=>{
  62.             alert(res.data);
  63.           });
  64.         },
  65.         get_count(){
  66.           this.socket.on("server_response",(res)=>{
  67.             this.game.print(res.count);
  68.             alert(`欢迎${res.sid}来到种植园,当前有${res.count}人在忙碌着~`);
  69.           });
  70.         },
  71.         login(){
  72.           var id = this.game.fget("id");
  73.           this.socket.emit("login",{"uid":id});
  74.         },
  75.         go_index(){
  76.           this.game.outWin("orchard");
  77.         },
  78.             }
  79.         });
  80.     }
  81.     </script>
  82. </body>
  83. </html>

基于房间管理分发信息

3.服务端定时推送数据

  1. from application import socketio
  2. from flask import request
  3. from application.apps.users.models import User
  4. from flask_socketio import join_room, leave_room
  5. # 建立socket通信
  6. @socketio.on("connect", namespace="/mofang")
  7. def user_connect():
  8.     # request.sid socketIO基于客户端生成的唯一会话ID
  9.     print("用户%s连接过来了!" % request.sid)
  10.     # 主动响应数据给客户端
  11.     length = User.query.count()
  12.     socketio.emit("server_response",{"count":length,"sid":"%s"% request.sid},namespace="/mofang")
  13.  
  14. # 断开socket通信
  15. @socketio.on("disconnect", namespace="/mofang")
  16. def user_disconnect():
  17.     print("用户%s退出了种植园" % request.sid )
  18.  
  19. # 未定义事件通信，客户端没有指定事件名称
  20. @socketio.on("message",namespace="/mofang")
  21. def user_message(data):
  22.     print("接收到来自%s发送的数据:" % request.sid)
  23.     print(data)
  24.     print(data["uid"])
  25.  
  26. # 自定义事件通信
  27. @socketio.on("login", namespace="/mofang")
  28. def user_login(data):
  29.     print("接受来自客户端%s发送的数据:" % request.sid)
  30.     print(data)
  31.     # 一般基于用户id分配不同的房间
  32.     room = data["uid"]
  33.     join_room(room)
  34.     socketio.emit("login_response", {"data": "登录成功"}, namespace="/mofang", room=room)
  35.  
  36. """***定时推送数据***"""
  37. from threading import Lock
  38. import random
  39. thread = None
  40. thread_lock = Lock()
  41.  
  42. @socketio.on('chat', namespace='/mofang')
  43. def chat(data):
  44.     global thread
  45.     with thread_lock:
  46.         if thread is None:
  47.             thread = socketio.start_background_task(target=background_thread)
  48.  
  49. def background_thread(uid):
  50.     while True:
  51.         socketio.sleep(1)
  52.         t = random.randint(1, 100)
  53.         socketio.emit('server_response',
  54.                       {'count': t},namespace='/mofang')

客户端代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>用户中心</title>
  5.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  6.     <meta charset="utf-8">
  7.     <link rel="stylesheet" href="../static/css/main.css">
  8.     <script src="../static/js/vue.js"></script>
  9.     <script src="../static/js/axios.js"></script>
  10.     <script src="../static/js/main.js"></script>
  11.     <script src="../static/js/uuid.js"></script>
  12.     <script src="../static/js/settings.js"></script>
  13.     <script src="../static/js/socket.io.js"></script>
  14. </head>
  15. <body>
  16.     <div class="app orchard" id="app">
  17.     <img class="music" :class="music_play?'music2':''" @click="music_play=!music_play" src="../static/images/player.png">
  18.     <div class="orchard-bg">
  19.             <img src="../static/images/bg2.png">
  20.             <img class="board_bg2" src="../static/images/board_bg2.png">
  21.         </div>
  22.     <img class="back" @click="go_index" src="../static/images/user_back.png" alt="">
  23.     <h1 style="position:absolute;top:20rem;">{{num}}</h1>
  24.   </div>
  25.     <script>
  26.     apiready = function(){
  27.         init();
  28.         new Vue({
  29.             el:"#app",
  30.             data(){
  31.                 return {
  32.           music_play:true,
  33.           token:"",
  34.           num:"",
  35.           socket: null,
  36.           timeout: 0,
  37.                     prev:{name:"",url:"",params:{}},
  38.                     current:{name:"orchard",url:"orchard.html",params:{}},
  39.                 }
  40.             },
  41.       created(){
  42.         this.checkout();
  43.       },
  44.             methods:{
  45.         checkout(){
  46.           var token = this.game.get("access_token") || this.game.fget("access_token");
  47.           this.game.checkout(this,token,(new_access_token)=>{
  48.             this.connect();
  49.           });
  50.         },
  51.         connect(){
  52.           // socket连接
  53.           this.socket = io.connect(this.settings.socket_server + this.settings.socket_namespace, {transports: ['websocket']});
  54.           this.socket.on('connect', ()=>{
  55.               this.game.print("开始连接服务端");
  56.               this.login();
  57.               this.get_count();
  58.               this.login_response();
  59.           });
  60.         },
  61.         login_response(){
  62.           this.socket.on("login_response",(res)=>{
  63.             alert(res.data);
  64.           });
  65.         },
  66.         get_count(){
  67.           this.socket.on("server_response",(res)=>{
  68.             this.num = res.count;
  69.             // alert(`欢迎${res.sid}来到种植园,当前有${res.count}人在忙碌着~`);
  70.           });
  71.         },
  72.         login(){
  73.           var id = this.game.fget("id");
  74.           // this.socket.emit("login",{"uid":id});
  75.           this.socket.emit("chat",{"uid":id}) // ****
  76.         },
  77.         go_index(){
  78.           this.game.outWin("orchard");
  79.         },
  80.             }
  81.         });
  82.     }
  83.     </script>
  84. </body>
  85. </html>

服务端定时推送数据

4.服务端推送广播信息

  1. from flask_socketio import emit
  2. @socketio.on('my_broadcast', namespace='/mofang')
  3. def my_broadcast(data):
  4.     emit('broadcast_response', data, broadcast=True)
  5.     socketio.emit('some event', {'data': 42})
  6.     # 只要不声明房间ID,则默认返回给整个命名空间下所有的用户都可以接收

4.种植园页面展示

1.种植园主页面显示

主框架，html/orchard.html，代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>用户中心</title>
  5.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  6.     <meta charset="utf-8">
  7.     <link rel="stylesheet" href="../static/css/main.css">
  8.     <script src="../static/js/vue.js"></script>
  9.     <script src="../static/js/axios.js"></script>
  10.     <script src="../static/js/main.js"></script>
  11.     <script src="../static/js/uuid.js"></script>
  12.     <script src="../static/js/settings.js"></script>
  13.     <script src="../static/js/socket.io.js"></script>
  14. </head>
  15. <body>
  16.     <div class="app orchard" id="app">
  17.     <img class="music" :class="music_play?'music2':''" @click="music_play=!music_play" src="../static/images/player.png">
  18.     <div class="orchard-bg">
  19.             <img src="../static/images/bg2.png">
  20.             <img class="board_bg2" src="../static/images/board_bg2.png">
  21.         </div>
  22.     <img class="back" @click="go_index" src="../static/images/user_back.png" alt="">
  23.     <div class="header">
  24.             <div class="info">
  25.                 <div class="avatar">
  26.                     <img class="avatar_bf" src="../static/images/avatar_bf.png" alt="">
  27.                     <img class="user_avatar" src="../static/images/avatar.png" alt="">
  28.                     <img class="avatar_border" src="../static/images/avatar_border.png" alt="">
  29.                 </div>
  30.                 <p class="user_name">好听的昵称</p>
  31.             </div>
  32.             <div class="wallet">
  33.                 <div class="balance">
  34.                     <p class="title"><img src="../static/images/money.png" alt="">钱包</p>
  35.                     <p class="num">99,999.00</p>
  36.                 </div>
  37.                 <div class="balance">
  38.                     <p class="title"><img src="../static/images/integral.png" alt="">果子</p>
  39.                     <p class="num">99,999.00</p>
  40.                 </div>
  41.             </div>
  42.       <div class="menu-list">
  43.         <div class="menu">
  44.           <img src="../static/images/menu1.png" alt="">
  45.           排行榜
  46.         </div>
  47.         <div class="menu">
  48.           <img src="../static/images/menu2.png" alt="">
  49.           签到有礼
  50.         </div>
  51.         <div class="menu">
  52.           <img src="../static/images/menu3.png" alt="">
  53.           道具商城
  54.         </div>
  55.         <div class="menu">
  56.           <img src="../static/images/menu4.png" alt="">
  57.           邮件中心
  58.         </div>
  59.       </div>
  60.         </div>
  61.     <div class="footer">
  62.       <ul class="menu-list">
  63.         <li class="menu">新手</li>
  64.         <li class="menu">背包</li>
  65.         <li class="menu-center">商店</li>
  66.         <li class="menu">消息</li>
  67.         <li class="menu">好友</li>
  68.       </ul>
  69.     </div>
  70.     </div>
  71.     <script>
  72.     apiready = function(){
  73.         init();
  74.         new Vue({
  75.             el:"#app",
  76.             data(){
  77.                 return {
  78.           music_play:true,
  79.           namespace: '/mofang_orchard',
  80.           token:"",
  81.           socket: null,
  82.           timeout: 0,
  83.                     prev:{name:"",url:"",params:{}},
  84.                     current:{name:"orchard",url:"orchard.html",params:{}},
  85.                 }
  86.             },
  87.       created(){
  88.         this.checkout();
  89.       },
  90.             methods:{
  91.         checkout(){
  92.           var token = this.game.get("access_token") || this.game.fget("access_token");
  93.           this.game.checkout(this,token,(new_access_token)=>{
  94.             this.connect();
  95.           });
  96.         },
  97.         connect(){
  98.           // socket连接
  99.           this.socket = io.connect(this.settings.socket_server + this.namespace, {transports: ['websocket']});
  100.           this.socket.on('connect', ()=>{
  101.               this.game.print("开始连接服务端");
  102.           });
  103.         },
  104.         go_index(){
  105.           this.game.outWin("orchard");
  106.         },
  107.             }
  108.         });
  109.     }
  110.     </script>
  111. </body>
  112. </html>

种植园主页面显示:orchard.html

2.我的种植园页面显示

我的果园，html/my_orchard.html，代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>用户中心</title>
  5.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  6.     <meta charset="utf-8">
  7.     <link rel="stylesheet" href="../static/css/main.css">
  8.     <script src="../static/js/vue.js"></script>
  9.     <script src="../static/js/axios.js"></script>
  10.     <script src="../static/js/main.js"></script>
  11.     <script src="../static/js/uuid.js"></script>
  12.     <script src="../static/js/settings.js"></script>
  13.     <script src="../static/js/socket.io.js"></script>
  14. </head>
  15. <body>
  16.     <div class="app orchard orchard-frame" id="app">
  17.     <div class="background">
  18.       <img class="grassland2" src="../static/images/grassland2.png" alt="">
  19.       <img class="mushroom1" src="../static/images/mushroom1.png" alt="">
  20.       <img class="stake1" src="../static/images/stake1.png" alt="">
  21.       <img class="stake2" src="../static/images/stake2.png" alt="">
  22.     </div>
  23.     <div class="pet-box">
  24.       <div class="pet">
  25.         <img class="pet-item" src="../static/images/pet1.png" alt="">
  26.       </div>
  27.       <div class="pet turned_off">
  28.         <img class="turned_image" src="../static/images/turned_off.png" alt="">
  29.         <p>请购买宠物</p>
  30.       </div>
  31.     </div>
  32.     <div class="tree-list">
  33.       <div class="tree-box">
  34.         <div class="tree">
  35.           <img src="../static/images/tree4.png" alt="">
  36.         </div>
  37.         <div class="tree">
  38.           <img src="../static/images/tree3.png" alt="">
  39.         </div>
  40.         <div class="tree">
  41.           <img src="../static/images/tree4.png" alt="">
  42.         </div>
  43.       </div>
  44.       <div class="tree-box">
  45.         <div class="tree">
  46.           <img src="../static/images/tree3.png" alt="">
  47.         </div>
  48.         <div class="tree">
  49.           <img src="../static/images/tree2.png" alt="">
  50.         </div>
  51.         <div class="tree">
  52.           <img src="../static/images/tree2.png" alt="">
  53.         </div>
  54.       </div>
  55.       <div class="tree-box">
  56.         <div class="tree">
  57.           <img src="../static/images/tree1.png" alt="">
  58.         </div>
  59.         <div class="tree">
  60.           <img src="../static/images/tree0.png" alt="">
  61.         </div>
  62.         <div class="tree">
  63.           <img src="../static/images/tree0.png" alt="">
  64.         </div>
  65.       </div>
  66.     </div>
  67.     <div class="prop-list">
  68.       <div class="prop">
  69.         <img src="../static/images/prop1.png" alt="">
  70.         <span>1</span>
  71.         <p>化肥</p>
  72.       </div>
  73.       <div class="prop">
  74.         <img src="../static/images/prop2.png" alt="">
  75.         <span>0</span>
  76.         <p>修剪</p>
  77.       </div>
  78.       <div class="prop">
  79.         <img src="../static/images/prop3.png" alt="">
  80.         <span>1</span>
  81.         <p>浇水</p>
  82.       </div>
  83.       <div class="prop">
  84.         <img src="../static/images/prop4.png" alt="">
  85.         <span>1</span>
  86.         <p>宠物粮</p>
  87.       </div>
  88.     </div>
  89.     <div class="pet-hp-list">
  90.       <div class="pet-hp">
  91.         <p>宠物1 饱食度</p>
  92.         <div class="hp">
  93.           <div style="width: 85%;" class="process">85%</div>
  94.         </div>
  95.       </div>
  96.       <div class="pet-hp">
  97.         <p>宠物2 饱食度</p>
  98.         <div class="hp">
  99.           <div style="width: 0;" class="process">0%</div>
  100.         </div>
  101.       </div>
  102.     </div>
  103.     </div>
  104.     <script>
  105.     apiready = function(){
  106.         init();
  107.         new Vue({
  108.             el:"#app",
  109.             data(){
  110.                 return {
  111.           namespace: '/mofang_orchard',
  112.           token:"",
  113.           socket: null,
  114.           timeout: 0,
  115.                     prev:{name:"",url:"",params:{}},
  116.                     current:{name:"orchard",url:"orchard.html",params:{}},
  117.                 }
  118.             },
  119.       created(){
  120.  
  121.       },
  122.             methods:{
  123.  
  124.             }
  125.         });
  126.     }
  127.     </script>
  128. </body>
  129. </html>

我的种植园页面显示:my_orchard.html

3.种植园CSS样式

css样式，代码：

  1. .orchard-frame .background{
  2.   position: absolute;
  3.   top: 0;
  4.   left: 0;
  5.   width: 100%;
  6.   height: 100rem;
  7. }
  8. .orchard-frame .background .grassland1{
  9.   width: 31.22rem;
  10.   height: 13.53rem;
  11.   position: absolute;
  12.   top: 4rem;
  13. }
  14. .orchard-frame .background .grassland2{
  15.   width: 31.22rem;
  16.   height: 13.53rem;
  17.   position: absolute;
  18.   top: 5rem;
  19. }
  20. .orchard-frame .background .mushroom1{
  21.   width: 4.56rem;
  22.   height: 4.83rem;
  23.   position: absolute;
  24.   right: 1rem;
  25.   top: 11rem;
  26. }
  27. .orchard-frame .background .stake1{
  28.   width: 4.56rem;
  29.   height: 4.83rem;
  30.   position: absolute;
  31.   top: 3rem;
  32.   left: 0rem;
  33. }
  34. .orchard-frame .background .stake2{
  35.   width: 6.31rem;
  36.   height: 4.83rem;
  37.   position: absolute;
  38.   top: 3rem;
  39.   left: 13rem;
  40. }
  41. .orchard-frame .pet-box{
  42.   position: absolute;
  43.   top: -2rem;
  44.   left: 0;
  45.   display: flex;
  46. }
  47. .orchard-frame .pet-box .pet{
  48.   position: relative;
  49.   width: 14.16rem;
  50.   height: 15rem;
  51.   flex: 1;
  52.   margin-left: 1rem;
  53.   margin-right: 1rem;
  54.   background: url("../images/tree1.png") no-repeat 0 -0.5rem;
  55.   background-size: 100%;
  56. }
  57. .orchard-frame .pet-box .turned_off .turned_image{
  58.   width: 5.14rem;
  59.   height: 6.83rem;
  60.   position: absolute;
  61.   top: 0;
  62.   left: 0;
  63.   right: 0;
  64.   bottom: 0;
  65.   margin: auto;
  66. }
  67. .orchard-frame .pet-box .turned_off p{
  68.   position: absolute;
  69.   top: 0;
  70.   left: 0;
  71.   right: 0;
  72.   bottom: 0;
  73.   margin: auto;
  74.   border: 1px solid #fff;
  75.   border-radius: 1rem;
  76.   width: 8rem;
  77.   height: 3rem;
  78.   line-height: 3rem;
  79.   font-size: 1.5rem;
  80.   word-wrap: break-word;
  81.   padding: 1rem;
  82.   color: #000;
  83.   text-align: center;
  84.   background: rgba(255,255,255,.6);
  85. }
  86. .orchard-frame .pet-box .pet-item{
  87.   width: 10rem;
  88.   height: 10rem;
  89.   position: absolute;
  90.   top: 0;
  91.   left: 0;
  92.   right: 0;
  93.   bottom: 0;
  94.   margin: auto;
  95. }
  96. .orchard-frame .tree-list{
  97.   position: absolute;
  98.   top: 9rem;
  99.   width: 100%;
  100. }
  101. .orchard-frame .tree-box{
  102.   margin-left: 3rem;
  103.   margin-right: 3rem;
  104. }
  105. .orchard-frame .tree-box .tree{
  106.   width: 9rem;
  107.   height: 4rem;
  108.   margin-bottom: 2rem;
  109.   float: left;
  110. }
  111. .orchard-frame .tree-box .tree img{
  112.   width: 9rem;
  113.   height: 8rem;
  114.   max-height: 8rem;
  115. }
  116. .orchard-frame .prop-list{
  117.   position: absolute;
  118.   bottom: 6rem;
  119.   width: 100%;
  120. }
  121. .orchard-frame .prop-list .prop{
  122.   float: left;
  123.   margin-left: 1rem;
  124.   width: 3rem;
  125.   position: relative;
  126. }
  127. .orchard-frame .prop-list .prop img{
  128.   width: 2.5rem;
  129.   height: 2.5rem;
  130.   margin: auto;
  131.   display: block;
  132. }
  133. .orchard-frame .prop-list .prop span{
  134.   position: absolute;
  135.   top: -4px;
  136.   right: -4px;
  137.   border-radius: 50%;
  138.   width: 1rem;
  139.   height； 1rem;
  140.   font-size: .8rem;
  141.   color: #fff;
  142.   background-color: #cc0000;
  143.   text-align: center;
  144.   line-height: 1rem;
  145.   padding: 2px;
  146. }
  147. .orchard-frame .prop-list .prop p{
  148.   text-align: center;
  149.   color: #fff;
  150. }
  151. .orchard-frame .pet-hp-list{
  152.   position: absolute;
  153.   right: 0;
  154.   bottom: 8rem;
  155.   width: 11rem;
  156.   height: 4rem;
  157. }
  158. .orchard-frame .pet-hp-list .pet-hp{
  159.   margin-bottom: 5px;
  160. }
  161. .orchard-frame .pet-hp-list .pet-hp p{
  162.  
  163. }
  164. .orchard-frame .pet-hp-list .pet-hp .hp{
  165.   border: 1px solid #fff;
  166.   border-radius: 5rem;
  167.   width: 10rem;
  168.   padding: 1px;
  169. }
  170. .orchard-frame .pet-hp-list .pet-hp .process{
  171.   font-size: 0.5rem;
  172.   background-color: red;
  173.   color: #fff;
  174.   border-radius: 5rem;
  175.   border-top-right-radius: 0;
  176.   border-bottom-right-radius: 0;
  177.   text-align: center;
  178. }

种植园CSS样式代码

day112:MoFang:种植园使用websocket代替http&服务端基于flask-socketio提供服务&服务端响应信息&种植园页面显示初始化的更多相关文章

  1. [转]python实现RESTful服务（基于flask）

    python实现RESTful服务(基于flask) 原文: https://www.jianshu.com/p/6ac1cab17929  前言 上一篇文章讲到如何用java实现RESTful服务, ...

  2. .net core微服务之基于Docker+Consul+Registrator服务注册服务发现

    一.Docker部分: 先拉最新的asp.net core的镜像: docker pull microsoft/aspnetcore 将下载下来的镜像重命名,为什么要重命名?等会讲Registrato ...

  3. .net core 跨平台开发 微服务架构 基于Nginx反向代理 服务集群负载均衡

    1.概述 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客 ...

  4. python实现RESTful服务（基于flask）

    https://www.jianshu.com/p/6ac1cab17929 http://www.pythondoc.com/flask/quickstart.html 在java中调用python ...

  5. python实现Restful服务（基于flask)(2)

    参考:https://blog.csdn.net/yelena_11/article/details/53404892 最简单的post例子: from flask import Flask, req ...

  6. iUAP云运维平台v3.0全面支持基于K8s的微服务架构

    什么是微服务架构? 微服务(MicroServices)架构是当前互联网业界的一个技术热点,业内各公司也都纷纷开展微服务化体系建设.微服务架构的本质,是用一些功能比较明确.业务比较精练的服务去解决更大 ...

  7. 微服务架构：构建PHP微服务生态

    微服务架构:构建PHP微服务生态   Linux系统技术交流QQ群(1675603)验证问题答案:刘遄 导读 诞生于 2014 年的“微服务架构”,其思想经由 Martin Fowler 阐述后,在近 ...

  8. 【认知服务 Azure Cognitive Service】使用认知服务的密钥无法访问语音服务[ErrorCode=AuthenticationFailure] (2020-08时的遇见的问题，2020-09月已解决)

    问题情形 根据微软认知服务的文档介绍,创建认知服务(Cognitive Service)后,可以调用微软的影像(计算机视觉,人脸),语言(LUIS, 文本分析,文本翻译),语音(文本转语音,语音转文本 ...

  9. 通过Dapr实现一个简单的基于.net的微服务电商系统(十二)——istio+dapr构建多运行时服务网格

    多运行时是一个非常新的概念.在 2020 年,Bilgin Ibryam 提出了 Multi-Runtime(多运行时)的理念,对基于 Sidecar 模式的各种产品形态进行了实践总结和理论升华.那到 ...

随机推荐

  1. java8新特性LocalDate、LocalTime、LocalDateTime的学习

    以前操作时间都是使用SimpleDateFormat类改变Date的时间格式,使用Calendar类操作时间.但是SimpleDateFormat是线程不安全的,源码如下: private Strin ...

  2. FL Studio钢琴卷轴之工具菜单的Riff命令

    鼠标左键点击FL Studio钢琴卷轴窗口中的"工具"命令,我们就可以打开快捷工具菜单.快捷菜单中包含了用于音符编辑的各种工具.按照该菜单的顺序,我们先来看一下什么是Riff器命令 ...

  3. guitar pro系列教程（二十七）：Guitar Pro教程之理解记谱法

    前面的章节我们讲解了很多关于Guitar Pro'的功能使用,今天小编还是采用图文结合的方式为大家讲解它的理解记谱法,对于很多新人来说,在我们看谱之前,我们肯定要先熟悉他的一些功能如何使用以及一些关于 ...

  4. JS&Swift相互交互

    加载本地HTML文件       x         override func loadView() {    super.loadView()    let conf = WKWebViewCon ...

  5. mysql 分组查询

    mysql 分组查询 获取id最大的一条 (1)分组查询获取最大id SELECT MAX(id) as maxId FROM `d_table` GROUP BY `parent_id` ; (2) ...

  6. JQuery案例：折叠菜单

    折叠菜单(jquery) <html> <head> <meta charset="UTF-8"> <title>accordion ...

  7. 测试:DOCX

    先拿到的是需求文档和接口文档以及测试用例模块,[以及之前写好的测试用例]再根据分配的任务进行编写用例 [智能看懂业务需求]现有功能点,在编写用例 [项目介绍]: 辽阳农商惠生活项目是作为一个农户和银行 ...

  8. IEEE754标准浮点数表示与舍入

    原文地址:https://blog.fanscore.cn/p/26/ 友情提示:本文排版不太好,但内容简单,请耐心观看,总会搞懂的. 1. 定点数 对于一个无符号二进制小数,例如101.111,如果 ...

  9. 我劝！这位年轻人不讲MVCC，耗子尾汁！

    目录 一.事物的隔离级别与MVCC? 二.Repeatable Read是如何实现的 本文是MySQL专题第15篇,全文近100篇(公众号首发) 三.Read Commited是如何实现的: 本文是M ...

  10. jquery on 动态生成绑定事件

    $(document).on("mouseenter", ".v6-div-kind-ok", function () { alert();});