Python Websocket

1 django dwebsocket 模块

一、创建项目(dj_websocket):
1、创建项目
python django-admin.py startproject dj_websocket
2、进入项目
cd dj_websocket
3、创建APP(myapp)
python manage.py startapp myapp
4、创建,static (静态文件夹),已经 templates(模板文件夹)
mkdir static
mkdir templates

二、配置 settings.py

1、在 INSTALLED_APPS 列表加上(myapp):
INSTALLED_APPS = [
    ...,
    'myapp',
]

2、在 TEMPLATES 列表的DIRS加上:
TEMPLATES = [
    {
        ...,
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        ...,
    },
]

3、在文件末尾加上:
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]

三、views.py 文件编写:

import json
import time
import datetime
from django.shortcuts import render
from dwebsocket.decorators import accept_websocket,require_websocket

# Create your views here.



def index(request):
    return render(request, 'index.html',{'init':'init'})


@accept_websocket
def echo(request):
    if not request.is_websocket():#判断是不是websocket连接
        #如果是普通的http方法
        try:
            message = request.GET['message']
            return HttpResponse(message)
        except:
            return render(request,'index.html')
    else:
        # 如果是websocket请求
        for message in request.websocket:
            request.websocket.send(message)#发送消息到客户端
            #request.websocket.send(message)
            # 推送10次,当然你可以无限次的推送
            for i in range(10):
                dt = str(datetime.datetime.now())
                s={'test':f"你好 {i} {dt}"}
                s=json.dumps(s).encode()
                request.websocket.send(s)
                time.sleep(0.1) # 间隔0.1秒

四、urls.py 文件编写:

from django.conf.urls import url
from django.contrib import admin

from myapp import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
    url(r'^echo$', views.echo),
]

五、index.html 编写(templates文件夹)
其中使用了 jquery-1.8.3.min.js ,需要下载到我们的 static 文件夹


<html>
<head>
    <meta charset="utf-8">
    <title>django-websockettitle>
    {% load staticfiles %}
    <script src="{% static 'jquery-1.8.3.min.js' %}">script>
    <script type="text/javascript">//
    $(function () {
            /*创建socket连接
            var socket = new WebSocket("ws://" + window.location.host + "/echo");
            socket.onopen = function () {
                console.log('WebSocket open');//成功连接上Websocket
                 socket.send($('#message').val());//通过websocket发送数据
            };
            socket.onmessage = function (e) {
                console.log('message: ' + e.data);//打印出服务端返回过来的数据
                $('#messagecontainer').prepend('

' + e.data + '

'); }; // Call onopen directly if socket is already open //if (socket.readyState == WebSocket.OPEN) socket.onopen(); // 这些代码可以实现一进入页面就自动推送,不可停止 */
$('#connect_websocket').click(function () { if (window.s) { window.s.close(); } /*创建socket连接*/ var socket = new WebSocket("ws://" + window.location.host + "/echo"); socket.onopen = function () { console.log('WebSocket open');//成功连接上Websocket }; socket.onmessage = function (e) { console.log('message: ' + e.data);//打印出服务端返回过来的数据 var d= $.parseJSON(e.data); //alert(typeof(d)); $('#messagecontainer').prepend('

' + d.test + '

'
); }; // Call onopen directly if socket is already open if (socket.readyState == WebSocket.OPEN) socket.onopen(); window.s = socket; }); $('#send_message').click(function () { //如果未连接到websocket if (!window.s) { alert("websocket未连接."); } else { window.s.send($('#message').val());//通过websocket发送数据 } }); $('#close_websocket').click(function () { if (window.s) { window.s.close();//关闭websocket console.log('websocket已关闭'); } }); }); //]]>
script>
head> <body> <br> <input type="text" id="message" value="开始..."/> <button type="button" id="connect_websocket">连接 websocketbutton> <button type="button" id="send_message">发送 messagebutton> <button type="button" id="close_websocket">关闭 websocketbutton> <h1>Received Messagesh1> <div id="messagecontainer"> div> {{init}} body> html>

六、开始执行:
这两句在这里不是必要的
python manage.py makemigrations
python manage.py migrate

运行服务器
python manage.py runserver

七、访问:
打开浏览器输入地址:http://localhost:8000/index/
我们将看到页面:
Python Websocket_第1张图片

点击连接,再点击发送,开始推送:
Python Websocket_第2张图片

2 websockets 模块

1 server.py

import websockets
import asyncio
import time
import datetime
import json

async def hello(websocket,path):
  name = await websocket.recv()
  print(f'A new client: {name}')
  for i in range(10):
    dt = str(datetime.datetime.now())
    s = json.dumps({'test':f"{name} {i} {dt}"})
    await websocket.send(s)
    print(f'send {name} {i} {dt}')
    time.sleep(0.1)


start_server = websockets.serve(hello,'localhost',8000)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

run server.py:
python server.py

2 client.py

import websockets
import asyncio


async def hello():
  async with websockets.connect('ws://localhost:8000') as websocket:
    name = input("what's your name?")
    await websocket.send(name)
    print(f"send server:{name}")
    while 1:
      greeting = await websocket.recv()
      print(f'receive from server:{greeting}')

asyncio.get_event_loop().run_until_complete(hello())

run client.py
python client.py
input:hello
output to server

A new client: hello
send hello 0 2018-07-28 20:24:11.410886
send hello 1 2018-07-28 20:24:11.511604
send hello 2 2018-07-28 20:24:11.612339
send hello 3 2018-07-28 20:24:11.713062
send hello 4 2018-07-28 20:24:11.813771
send hello 5 2018-07-28 20:24:11.914492
send hello 6 2018-07-28 20:24:12.015099
send hello 7 2018-07-28 20:24:12.115936
send hello 8 2018-07-28 20:24:12.216658
send hello 9 2018-07-28 20:24:12.317399

output to client.py

what's your name?hello
send server:hello
receive from server:{"test": "hello 0 2018-07-28 20:24:11.410886"}
receive from server:{"test": "hello 1 2018-07-28 20:24:11.511604"}
receive from server:{"test": "hello 2 2018-07-28 20:24:11.612339"}
receive from server:{"test": "hello 3 2018-07-28 20:24:11.713062"}
receive from server:{"test": "hello 4 2018-07-28 20:24:11.813771"}
receive from server:{"test": "hello 5 2018-07-28 20:24:11.914492"}
receive from server:{"test": "hello 6 2018-07-28 20:24:12.015099"}
receive from server:{"test": "hello 7 2018-07-28 20:24:12.115936"}
receive from server:{"test": "hello 8 2018-07-28 20:24:12.216658"}
receive from server:{"test": "hello 9 2018-07-28 20:24:12.317399"}

3 client.html

<html>
<head>
    <meta charset="utf-8">
    <title>django-websockettitle>
    <script src="jquery-1.8.3.min.js">script>
<script type="text/javascript">
    $(function () {
        $('#connect_websocket').click(function () {
            if (window.s) {
                window.s.close();
            }
            /*创建socket连接*/
            var socket = new WebSocket("ws://localhost:8000");
            socket.onopen = function () {
                console.log('WebSocket open');//成功连接上Websocket
            };
            socket.onmessage = function (e) {
                console.log('message: ' + e.data);//打印出服务端返回过来的数据
                var d= $.parseJSON(e.data);
                $('#messagecontainer').prepend('

' + d.test + '

'
); }; if (socket.readyState == WebSocket.OPEN) socket.onopen(); window.s = socket; }); $('#send_message').click(function () { //如果未连接到websocket if (!window.s) { alert("websocket未连接."); } else { window.s.send($('#message').val());//通过websocket发送数据 } }); $('#close_websocket').click(function () { if (window.s) { window.s.close();//关闭websocket console.log('websocket已关闭'); } }); });
script> head> <body> <br> <input type="text" id="message" value="开始..."/> <button type="button" id="connect_websocket">连接 websocketbutton> <button type="button" id="send_message">发送 messagebutton> <button type="button" id="close_websocket">关闭 websocketbutton> <div id="messagecontainer"> div> body> html>

run client.html
打开浏览器输入地址:file:///home/huang/Practise/demo1/client.html

输入 :你好,点击连接,再点击发送,开始推送:
output to server

A new client: 你好
send 你好 0 2018-07-28 20:38:34.384413
send 你好 1 2018-07-28 20:38:34.485158
send 你好 2 2018-07-28 20:38:34.585793
send 你好 3 2018-07-28 20:38:34.686401
send 你好 4 2018-07-28 20:38:34.787105
send 你好 5 2018-07-28 20:38:34.887769
send 你好 6 2018-07-28 20:38:34.988483
send 你好 7 2018-07-28 20:38:35.089176
send 你好 8 2018-07-28 20:38:35.189867
send 你好 9 2018-07-28 20:38:35.290481

output to client.html

你好 9 2018-07-28 20:38:35.290481

你好 8 2018-07-28 20:38:35.189867

你好 7 2018-07-28 20:38:35.089176

你好 6 2018-07-28 20:38:34.988483

你好 5 2018-07-28 20:38:34.887769

你好 4 2018-07-28 20:38:34.787105

你好 3 2018-07-28 20:38:34.686401

你好 2 2018-07-28 20:38:34.585793

你好 1 2018-07-28 20:38:34.485158

你好 0 2018-07-28 20:38:34.384413

3 websockets 模块模拟动态推送K线图数据回测

1、web_server.py

import json
import time
import random
import datetime
import asyncio
import websockets

async def echo2(websocket, path):
    message = await websocket.recv()
    await websocket.send(message)

@asyncio.coroutine
def echo(websocket, path):
    message = yield from websocket.recv()
    print('recv', message)
    dt = datetime.datetime.now()
    cc = 1000
    for i in range(1000):
        dt2 = str(dt + datetime.timedelta(minutes=i))[11:19]
        y = [cc + random.randint(-80, 100) for i in range(4)]
        v = []
        mi = min(y)
        ma = max(y)
        y.remove(mi)
        y.remove(ma)
        y = [y[0], y[1], mi, ma]
        cc = y[2] if y[2] > 900 else 1000
        s = {'datetime': dt2, 'topic': 'bar','open':y[0],'close':y[1],'high':y[2],'low':y[3]}
        s = json.dumps(s)#.encode()
        #print(s)
        # request.websocket.send(s)
        yield from websocket.send(s)

        v = random.randint(0,5)
        if v in (3,4):
            v = 'SELL' if v==4 else 'BULL' # 卖出、买入
            s = {'topic':'trade','trading_dt':dt2,'price':y[1],'side':v}
            print(s)
        s = json.dumps(s)#.encode()

        # request.websocket.send(s)
        yield from websocket.send(s)

        time.sleep(0.5)  # 间隔0.5秒


start_server = websockets.serve(echo, 'localhost', 8000)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

2 web_client.html


<html>
<head>
    <meta charset="utf-8">
    <title>django-websockettitle>
    <script type="text/javascript" src="jquery-1.8.3.min.js">script>
    <script type="text/javascript" src="echarts.min.js">script>
head>
<body>
<br>
<input type="text" id="message" value="200"/>
<button type="button" id="connect_websocket">连接button>
<button type="button" id="send_message">开始画图button>
<button type="button" id="close_ht">暂停画图button>
<button type="button" id="close_websocket">关闭接收数据button>
<div id="messagecontainer">

div>
<div id="main" style="width: auto;height: 800px;" align="center">div>
    <script type="text/javascript">

var myChart = echarts.init(document.getElementById('main'));
var bs = new Array();
var xzs = new Array();

option = {
    title : {
        text: '回测',
        subtext: 'K线'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['回测','卖出','买入']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : {
        show : true,
        realtime: true,
        start : 50,
        end : 100
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : true,
            data : [

            ]
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale:true,
            splitNumber: 5,
            boundaryGap: [0.05, 0.05]
        }
    ],
    series : [
        {
            name:'回测',
            type:'k',
            data:[ // 开盘,收盘,最低,最高
            ]
        },{
            name:'卖出',
            type:'scatter',
            symbol: 'arrow',//'star3',
            symbolSize: 12,
            smooth:true,
            symbolRotate:180,

            itemStyle:{
                //symbolRotate:-90,
                normal: { color:function(p){
                    return bs[p.name];
                 }
                }
            },

            data: []
        },{
            name:'买入',
            type:'scatter',
            symbol: 'arrow',//'star3',
            symbolSize: 12,
            smooth:true,
            symbolRotate:0,

            itemStyle:{
                //symbolRotate:-90,
                normal: { color:function(p){
                    return bs[p.name];
                 }
                }
            },

            data: []
        }
    ]
};

stringToDate = function(dateStr,separator){
     if(!separator){
            separator="-";
     }
     var dateArr = dateStr.split(separator);
     var year = parseInt(dateArr[0]);
     var month;
     //处理月份为04这样的情况
     if(dateArr[1].indexOf("0") == 0){
         month = parseInt(dateArr[1].substring(1));
     }else{
          month = parseInt(dateArr[1]);
     }
     var day = parseInt(dateArr[2]);
     var date = new Date(year,month -1,day);
     return date;
 }

var k_x = new Array();
var k_y = new Array();
var y_x = new Array();
var y_y = new Array();
var y_y2 = new Array();
var is_huatu = true;
var size = $('#message').val()-0;

//myChart.setOption(option);

function timeTicket(x,y,type,side){
    // 动态数据接口 addData
    // lastIndex += 1;
    // var len2 = option.series[0].data.length;
    // var d = option.xAxis[0].data[len2-1];
    // d = stringToDate(d,'/');
    // d.setDate(d.getDate()+1);
    // d = d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate();

    if(type=='k'){
        var ind = k_x.indexOf(x);
        if(ind<0){
                k_x.push(x);
                k_y.push(y);
                y_y.push('');
                y_y2.push('');
            }else{
                k_y[ind] = y;
            }

            if(is_huatu){
                option.xAxis[0].data=k_x.slice(-size);
                option.series[0].data=k_y.slice(-size);
                option.series[1].data=y_y.slice(-size);
                option.series[2].data=y_y2.slice(-size);
                //option.series[1].symbolRotate=y_y.slice(-size);
                myChart.setOption(option);
            }
    }else if(type=='y'){
            var ind = k_x.indexOf(x);

            if(ind<0){
                k_x.push(x);
                k_y.push(k_y[k_y.length-1]);
                if(side=='SELL'){
                    y_y.push(y);
                    y_y2.push('')
                }else{
                    y_y.push('');
                    y_y2.push(y)
                }
            }else{
                //y_y[ind] = y;
                if(side=='SELL'){
                    y_y[ind] = y;
                }else{
                   y_y2[ind] = y;
                }
            }
            if(is_huatu){
                option.xAxis[0].data=k_x.slice(-size);
                option.series[0].data=k_y.slice(-size);
                option.series[1].data=y_y.slice(-size);
                option.series[2].data=y_y2.slice(-size);
               myChart.setOption(option);
            }
    }else{
        option.xAxis[0].data=k_x.slice(-size);
        option.series[0].data=k_y.slice(-size);
        option.series[1].data=y_y.slice(-size);
        option.series[2].data=y_y2.slice(-size);
        myChart.setOption(option);
    }
        /*myChart.addData([
            [
                0,        // 系列索引
                option.series[0].data[lastIndex%len], // 新增数据
                false,     // 新增数据是否从队列头部插入
                false,     // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头
                d //option.xAxis[0].data[lastIndex%len]
            ]
        ]);*/
}

$(function () {
        function manages(info){
            if (window.s) {
                window.s.close();
            }
            /*创建socket连接*/
            var url = "ws://localhost:8000"; // 连接地址
            var socket = new WebSocket(url); //window.location.host
            socket.onopen = function () {
                console.log('WebSocket open');//成功连接上Websocket
                if(info) alert('WebSocket open');
            };
            var x=null,y=null;
            socket.onmessage = function (e) {
                console.log('message: ' + e.data);//打印出服务端返回过来的数据
                var d= $.parseJSON(e.data);
                if(d.topic=='bar'){
                    x = d.datetime;
                    y=[d.open,d.close,d.high,d.low]
                    timeTicket(x,y,'k','');
                }else if(d.topic=='trade'){
                    x = d.trading_dt;
                    y = d.price;
                    //bs = d.bs;
                    if(d.side=='SELL'){
                        bs[x]='green';
                    }else{
                        bs[x]='red';
                    }
                    timeTicket(x,y,'y',d.side);
                }
            };
            // Call onopen directly if socket is already open
            if (socket.readyState == WebSocket.OPEN) socket.onopen();
            window.s = socket;
        }
        manages(false);
        $('#connect_websocket').click(function () {
            manages(true);
        });
        $('#send_message').click(function () {
            //如果未连接到websocket
            is_huatu = true;
            if (!window.s) {
                alert("websocket未连接.");
            } else {
                window.s.send($('#message').val());//通过websocket发送数据
            }
        });
        $('#close_websocket').click(function () {
            if (window.s) {
                window.s.close();//关闭websocket
                console.log('websocket已关闭');
            }
        });
        $('#close_ht').click(function () {
            is_huatu = false;
            size = $('#message').val()-0;
            timeTicket('','','','');
        });
    });


//var t=setInterval("timeTicket()",100);
script>
body>
html>

3 执行
1、python web_server.py
2、浏览器打开:web_client.html,点击开始画图

服务端输出结果:

D:\tools>python server_web.py
recv 200
{'topic': 'trade', 'trading_dt': '18:58:22', 'price': 882, 'side': 'BULL'}
{'topic': 'trade', 'trading_dt': '18:59:22', 'price': 1032, 'side': 'BULL'}
{'topic': 'trade', 'trading_dt': '19:01:22', 'price': 856, 'side': 'BULL'}
。。。。。。

浏览器输出结果:
Python Websocket_第3张图片

你可能感兴趣的:(django,websocket)