python 全栈开发，Day130(多玩具端的遥控功能, 简单的双向聊天,聊天记录存放数据库,消息提醒,玩具主动发起消息,玩具主动发起点播)...

傷城~ 2022-02-02 08:06 141阅读 0赞

# [python 全栈开发，Day130(多玩具端的遥控功能, 简单的双向聊天,聊天记录存放数据库,消息提醒,玩具主动发起消息,玩具主动发起点播)][python _Day130_] #

**先下载github代码，下面的操作，都是基于这个版本来的！**

[https://github.com/987334176/Intelligent\_toy/archive/v1.3.zip][https_github.com_987334176_Intelligent_toy_archive_v1.3.zip]

**注意：由于涉及到版权问题，此附件没有图片和音乐。请参考链接，手动采集一下！**

请参考链接：

[https://www.cnblogs.com/xiao987334176/p/9647993.html\#autoid-3-4-0][https_www.cnblogs.com_xiao987334176_p_9647993.html_autoid-3-4-0]

# 一、多玩具端的遥控功能 #

## 地址统一管理 ##

进入flask项目，修改 templates-->index.html

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    <audio src="" autoplay="autoplay" controls id="player"></audio>
    <br>
    <input type="text" id="device_id">
    <button οnclick="start_toy()">玩具开机键</button>
    <br>
    <button οnclick="start_reco()">开始废话</button>
    <br>
    <button οnclick="stop_reco()">发送语音</button>
    </body>
    <script src="/static/recorder.js"></script>
    <script src="/static/jquery.min.js"></script>
    <script type="application/javascript">
        var serv = "http://192.168.11.40:9527";
        var ws_serv = "ws://192.168.11.40:9528";
    
        // 获取音频文件
        var get_music = serv + "/get_audio/";
    
        var ws = null;  // WebSocket 对象
        var reco = null;
        // 创建AudioContext对象
        var audio_context = new AudioContext();
        //要获取音频和视频
        navigator.getUserMedia = (navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia);
    
        // 拿到媒体对象，允许音频对象
        navigator.getUserMedia({audio: true}, create_stream, function (err) {
            console.log(err)
        });
    
        //创建媒体流容器
        function create_stream(user_media) {
            var stream_input = audio_context.createMediaStreamSource(user_media);
            // 给Recoder 创建一个空间，麦克风说的话，都可以录入。是一个流
            reco = new Recorder(stream_input);
    
        }
    
        function start_reco() {  //开始录音
            reco.record();  //往里面写流
        }
    
        function stop_reco() {  //停止录音
            reco.stop();  //停止写入流
            get_audio();  //调用自定义方法
            reco.clear();  //清空容器
        }
    
        function get_audio() {  // 获取音频
            reco.exportWAV(function (wav_file) {
                ws.send(wav_file);  //使用websocket连接发送数据给后端
            })
        }
    
        function start_toy() {  // 玩具开机
            // 获取输入的设备id
            var device_id = document.getElementById("device_id").value;
            // 发送post请求
            $.post(
                // 这里的地址必须是127.0.0.1,否则会有跨域问题
                "http://127.0.0.1:9527/device_toy_id",
                // 发送设备id
                {device_id: device_id},
                function (data) {
                    console.log(data);
                    toy_id = data.data.toy_id;  // 玩具id
                    // 修改audio标签的src属性
                    document.getElementById("player").src = get_music + data.data.audio;
                    if (toy_id) {  // 判断玩具id存在时
                        ws = new WebSocket(ws_serv + "/toy/" + toy_id);
                        ws.onmessage = function (data) {
                            // console.log(get_music + data.data);
                            var content = JSON.parse(data.data);  //反序列化数据
                            document.getElementById("player").src = get_music + content.data;
                            console.log(content.from_user + "给你点了一首歌");
                        }
                    }
                }, "json"
                // 规定预期的服务器响应的数据类型为json
            );
        }
    
    
    </script>
    </html>

进入 HBuilder项目MyApp，查看mui.js。

...
    window.ws_serv = "192.168.11.40:9528";
    window.serv = "http://192.168.11.40:9527";
    window.serv_imge = window.serv+"/get_image/";
    window.serv_audio = window.serv+"/get_audio/";
    ...

这里面，已经是统一化管理了

昨天内容，已经实现了简单的对话。但是点歌功能被删掉了，今天需要开启一下。

进入flask项目，**修改im\_serv.py**，增加msg\_type。用来做消息类型判断！

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

from flask import Flask, request
    from geventwebsocket.websocket import WebSocket
    from geventwebsocket.handler import WebSocketHandler
    from gevent.pywsgi import WSGIServer
    import json, os
    from uuid import uuid4
    from setting import AUDIO_FILE,CHAT_FILE
    from serv import content
    
    app = Flask(__name__)
    
    user_socket_dict = {}  # 空字典,用来存放用户名和发送消息
    
    
    @app.route("/toy/<tid>")
    def toy(tid):  # 玩具连接
        # 获取请求的WebSocket对象
        user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket
        if user_socket:
            # 设置键值对
            user_socket_dict[tid] = user_socket
            print(user_socket_dict)
            # {'123456': <geventwebsocket.websocket.WebSocket object at 0x00000176ABD92E18>}
    
        # 循环,接收消息
        while True:
            # 接收消息
            msg = user_socket.receive()
            print(msg)  # 打印
            if type(msg) == bytearray:
                # print(11)
                with open('123.wav','wb') as f:
                    f.write(msg)  # 写入文件
    
    
    @app.route("/app/<uid>")
    def user_app(uid):  # 手机app连接
        user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket
        if user_socket:
            user_socket_dict[uid] = user_socket
            # { uid : websocket}
            print(user_socket_dict)
    
        file_name = ""
        to_user = ""
    
        while True:  # 手机听歌 把歌曲发送给 玩具 1.将文件直接发送给玩具 2.将当前听的歌曲名称或ID发送到玩具
            msg = user_socket.receive()
            if type(msg) == bytearray:  # 判断类型为bytearray
                file_name = f"{uuid4()}.amr"  # 文件后缀为amr，安卓和ios通用
                file_path = os.path.join(CHAT_FILE, file_name)  # 存放在chat目录
                print(msg)
                with open(file_path, "wb") as f:
                    f.write(msg)  # 写入文件
    
                # 将amr转换为mp3,因为html中的audio不支持amr
                os.system(f"ffmpeg -i {file_path} {file_path}.mp3")
    
            else:
                msg_dict = json.loads(msg)
                to_user = msg_dict.get("to_user")  # 获取目标用户
    
                if msg_dict.get("msg_type") == "music":
                    other_user_socket = user_socket_dict.get(to_user)
    
                    send_str = {
                        "code": 0,
                        "from_user": uid,
                        "msg_type": "music",
                        "data": msg_dict.get("data")
                    }
                    other_user_socket.send(json.dumps(send_str))
    
                # res = content._content_one(content_id)
            if file_name and to_user:  # 如果文件名和发送用户同上存在时
                # 获取websocket对象
                other_user_socket = user_socket_dict.get(to_user)
                # 构造数据
                send_str = {
                    "code": 0,
                    "from_user": uid,
                    "msg_type": "chat", # 聊天类型
                    # 后缀必须是mp3的
                    "data": f"{file_name}.mp3"
                }
                # 发送数据给前端页面
                other_user_socket.send(json.dumps(send_str))
                # 最后一定要清空这2个变量，否则造成混乱
                file_name = ""
                to_user = ""
    
    
    if __name__ == '__main__':
        # 创建一个WebSocket服务器
        http_serv = WSGIServer(("0.0.0.0", 9528), app, handler_class=WebSocketHandler)
        # 开始监听HTTP请求
        http_serv.serve_forever()
    
    
    '''
    {
        "code": 0,
        "from_user": uid,  # APP用户id
        "data": music_name  # 歌曲名
    }
    '''

**这里最重要的是msg\_ytpe**

**修改 templates-->index.html**，做msg\_type判断

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    <audio src="" autoplay="autoplay" controls id="player"></audio>
    <br>
    <input type="text" id="device_id">
    <button οnclick="start_toy()">玩具开机键</button>
    <br>
    <button οnclick="start_reco()">开始废话</button>
    <br>
    <button οnclick="stop_reco()">发送语音</button>
    </body>
    <script src="/static/recorder.js"></script>
    <script src="/static/jquery.min.js"></script>
    <script type="application/javascript">
        var serv = "http://192.168.11.40:9527";
        var ws_serv = "ws://192.168.11.40:9528";
    
        // 获取音频文件
        var get_music = serv + "/get_audio/";
    
        var ws = null;  // WebSocket 对象
        var reco = null;
        // 创建AudioContext对象
        var audio_context = new AudioContext();
        //要获取音频和视频
        navigator.getUserMedia = (navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia);
    
        // 拿到媒体对象，允许音频对象
        navigator.getUserMedia({audio: true}, create_stream, function (err) {
            console.log(err)
        });
    
        //创建媒体流容器
        function create_stream(user_media) {
            var stream_input = audio_context.createMediaStreamSource(user_media);
            // 给Recoder 创建一个空间，麦克风说的话，都可以录入。是一个流
            reco = new Recorder(stream_input);
    
        }
    
        function start_reco() {  //开始录音
            reco.record();  //往里面写流
        }
    
        function stop_reco() {  //停止录音
            reco.stop();  //停止写入流
            get_audio();  //调用自定义方法
            reco.clear();  //清空容器
        }
    
        function get_audio() {  // 获取音频
            reco.exportWAV(function (wav_file) {
                ws.send(wav_file);  //使用websocket连接发送数据给后端
            })
        }
    
        function start_toy() {  // 玩具开机
            // 获取输入的设备id
            var device_id = document.getElementById("device_id").value;
            // 发送post请求
            $.post(
                // 这里的地址必须是127.0.0.1,否则会有跨域问题
                "http://127.0.0.1:9527/device_toy_id",
                // 发送设备id
                {device_id: device_id},
                function (data) {
                    console.log(data);
                    toy_id = data.data.toy_id;  // 玩具id
                    // 修改audio标签的src属性
                    document.getElementById("player").src = get_music + data.data.audio;
                    if (toy_id) {  // 判断玩具id存在时
                        ws = new WebSocket(ws_serv + "/toy/" + toy_id);
                        ws.onmessage = function (data) {
                            // console.log(get_music + data.data);
                            var content = JSON.parse(data.data);  //反序列化数据
                            // 判断消息类型
                            if (content.msg_type == "chat") {
                                document.getElementById("player").src = get_chat + content.data;
                                document.getElementById("to_user").innerText = content.from_user;
                                console.log(content.from_user + "给你发送了一条消息");
                            }
                            if (content.msg_type == "music") {
                                document.getElementById("player").src = get_music + content.data;
                                console.log(content.from_user + "给你点播了歌儿");
                            }
                        }
                    }
                }, "json"
                // 规定预期的服务器响应的数据类型为json
            );
        }
    
    
    </script>
    </html>

**进入 HBuilder项目，****修改index.html**，修改send\_music监听事件。统一格式，发送to\_user

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <title></title>
            <script src="js/mui.js"></script>
            <link href="css/mui.min.css" rel="stylesheet" />
        </head>
    
        <body>
            
            <nav class="mui-bar mui-bar-tab">
                <a class="mui-tab-item mui-active" id="index">
                    <span class="mui-icon mui-icon-home"></span>
                    <span class="mui-tab-label">首页</span>
                </a>
                <a class="mui-tab-item" id="message">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <span class="mui-tab-label">消息</span>
                </a>
                <a class="mui-tab-item">
                    <span class="mui-icon mui-icon-email"></span>
                    <span class="mui-tab-label">邮件</span>
                </a>
                <a class="mui-tab-item" id="login">
                    <span class="mui-icon mui-icon-gear"></span>
                    <span class="mui-tab-label">设置</span>
                </a>
            </nav>
        </body>
        <script type="text/javascript" charset="utf-8">
            var ws = null; // websocket对象
            mui.init({
                subpages: [{
                    url: "main.html",
                    id: "main.html",
                    styles: window.styles
                }]
            });
            mui.plusReady(function() {
                //            console.log(JSON.stringify(plus.webview.currentWebview()))
                if(plus.storage.getItem("user")) { // 判断是否登录
                    console.log('已结登录了！');
                    //连接websocket连接
                    ws = new WebSocket("ws://" + window.ws_serv + "/app/" + plus.storage.getItem("user"))
                    // 客户端接收服务端数据时触发
                    ws.onmessage = function() {};
                }
            });
    
            // 消息
            document.getElementById("message").addEventListener("tap", function() {
                mui.openWindow({
                    url: "message.html",
                    id: "message.html",
                    styles: window.styles,
                    extras: {
                        // 传输用户id,给message.html
                        user_id: plus.storage.getItem("user")
                    }
                })
            });
    
            document.getElementById("index").addEventListener("tap", function() {
                mui.openWindow({
                    url: "main.html",
                    id: "main.html",
                    styles: window.styles
                })
            })
    
            document.getElementById("login").addEventListener("tap", function() {
                // 自动登录,判断storage中的user存在，就跳转到user_info，否则跳转login
                if(plus.storage.getItem("user")) {
                    mui.openWindow({
                        url: "user_info.html",
                        id: "user_info.html",
                        styles: window.styles,
                        extras: {
                            user_id: plus.storage.getItem("user")
                        }
                    })
                } else {
                    mui.openWindow({
                        url: "login.html",
                        id: "login.html",
                        styles: window.styles
                    })
                }
            })
    
            document.addEventListener("login", function(data) {
                // fire事件接收消息，使用data.detail
                // index是为做显示区分
                mui.toast("index" + data.detail.msg)
            });
    
            document.addEventListener("send_music", function(data) { //监听send_music事件
                var music_name = data.detail.music_name; //获取player.html使用fire发送的music_name值
                var toy_id = data.detail.toy_id; //获取发送的玩具id
    
                send_str = { //构造数据
                    data: music_name,
                    to_user: toy_id,  // 目标用户,这里统一格式
                    msg_type:"music",  // 类型为音乐
                }
                // 发送数据给后端，注意要json序列化
                ws.send(JSON.stringify(send_str));
            });
    
            document.addEventListener("send_msg", function(data) {  //发送消息
                var filename = data.detail.filename
                var to_user = data.detail.to_user
                send_str = {
                    to_user: to_user
                }
                ws.send(JSON.stringify(send_str))
                plus.io.resolveLocalFileSystemURL(filename, function(entry) {
                    // 可通过entry对象操作test.html文件 
                    entry.file(function(file) {
                        // FileReader文件系统中的读取文件对象，用于获取文件的内容
                        var fileReader = new plus.io.FileReader();
    
                        //                        alert("getFile:" + JSON.stringify(file));
                        // readAsDataURL: 以URL编码格式读取文件数据内容
                        fileReader.readAsDataURL(file, 'utf-8');
                        // onloadend: 文件读取操作完成时的回调函数
                        fileReader.onloadend = function(evt) {
                            console.log(evt.target.result);
                            var b = dataURLtoBlob(evt.target.result);
                            ws.send(b);  // 发送blob数据
    
                        }
                        //                        alert(file.size + '--' + file.name)
                    });
                });
    
            })
    
            function dataURLtoBlob(dataurl) {  // 数据转换为Blob
                // 逻辑很复杂,这里不解释了。直接用就可以了！
                var arr = dataurl.split(','),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                while(n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                var a = new Blob([u8arr], {
                    type: mime
                });
                return a
            }
        </script>
    
    </html>

**进入flask项目，根目录下新建文件夹 chat**

此时项目结构如下：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

./
    ├── audio
    ├── audio_img
    ├── chat
    ├── device_code
    ├── im_serv.py
    ├── manager.py
    ├── QRcode.py
    ├── serv
    │   ├── content.py
    │   ├── devices.py
    │   ├── friend.py
    │   ├── get_file.py
    │   └── toys.py
    ├── setting.py
    ├── static
    │   ├── jquery.min.js
    │   └── recorder.js
    ├── templates
    │   └── index.html
    ├── utils
    │   └── baidu_ai.py
    └── xiaopapa.py

**进入目录 audio，将里面所有 amr和amr.mp3文件全部删掉！**

**这些文件，会自动放到chat目录**

![1341090-20180920200111365-1732675931.png][]

**修改 settings.py**，增加 CHAT\_FILE变量

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

import pymongo
    
    client = pymongo.MongoClient(host="127.0.0.1", port=27017)
    MONGO_DB = client["bananabase"]
    
    RET = {
        # 0: false 2: True
        "code": 0,
        "msg": "",  # 提示信息
        "data": {}
    }
    
    XMLY_URL = "http://m.ximalaya.com/tracks/"  # 喜马拉雅链接
    CREATE_QR_URL = "http://qr.liantu.com/api.php?text="  # 生成二维码API
    
    # 文件目录
    import os
    
    AUDIO_FILE = os.path.join(os.path.dirname(__file__), "audio")  # 音频
    AUDIO_IMG_FILE = os.path.join(os.path.dirname(__file__), "audio_img")  # 音频图片
    
    DEVICE_CODE_PATH = os.path.join(os.path.dirname(__file__), "device_code")  # 二维码
    CHAT_FILE = os.path.join(os.path.dirname(__file__), "chat")  # 聊天
    
    # 百度AI配置
    APP_ID = "11712345"
    API_KEY = "3v3igzCkVFUDwFByNE12345"
    SECRET_KEY = "jRnwLE7kzC1aRi2FD10OQY3y9O12345"
    SPEECH = {
        "spd": 4,
        'vol': 5,
        "pit": 8,
        "per": 4
    }

**修改 get\_file.py**，增加get\_chat视图函数

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

from flask import Blueprint, send_file
    from setting import AUDIO_FILE
    from setting import AUDIO_IMG_FILE
    from setting import CHAT_FILE
    import os
    
    getfile = Blueprint("getfile", __name__)
    
    @getfile.route("/get_audio/<filename>")
    def get_audio(filename):  # 获取音频
        sendfile = os.path.join(AUDIO_FILE, filename)
        return send_file(sendfile)
    
    @getfile.route("/get_image/<filename>")
    def get_image(filename):  # 获取图片
        sendfile = os.path.join(AUDIO_IMG_FILE, filename)
        return send_file(sendfile)
    
    @getfile.route("/get_chat/<filename>")
    def get_chat(filename):  # 获取聊天文件
        sendfile = os.path.join(CHAT_FILE, filename)
        return send_file(sendfile)

访问网页，让2个玩具页面开机！

![1341090-20180920195235419-324596113.png][]

使用模拟器访问页面，点击一首歌曲，点击发送给 小甜甜

![1341090-20180920200424224-1285538055.png][]

此时浏览器第二个页面，就是小甜甜。会自动播放音乐！

![1341090-20180920200655202-1150465363.png][]

注意：必须要web玩具和手机APP，都连接上websocket才行。否则会导致点歌不成功！

## 自动重连websocket ##

为了避免后续操作，因为websocket连接而导致的问题。修改相关代码，可以自动重连！

进入 HBuilder项目MyApp，**修改index.html**，增加ws.onclose

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <title></title>
            <script src="js/mui.js"></script>
            <link href="css/mui.min.css" rel="stylesheet" />
        </head>
    
        <body>
            
            <nav class="mui-bar mui-bar-tab">
                <a class="mui-tab-item mui-active" id="index">
                    <span class="mui-icon mui-icon-home"></span>
                    <span class="mui-tab-label">首页</span>
                </a>
                <a class="mui-tab-item" id="message">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <span class="mui-tab-label">消息</span>
                </a>
                <a class="mui-tab-item">
                    <span class="mui-icon mui-icon-email"></span>
                    <span class="mui-tab-label">邮件</span>
                </a>
                <a class="mui-tab-item" id="login">
                    <span class="mui-icon mui-icon-gear"></span>
                    <span class="mui-tab-label">设置</span>
                </a>
            </nav>
        </body>
        <script type="text/javascript" charset="utf-8">
            var ws = null; // websocket对象
            mui.init({
                subpages: [{
                    url: "main.html",
                    id: "main.html",
                    styles: window.styles
                }]
            });
            mui.plusReady(function() {
                //            console.log(JSON.stringify(plus.webview.currentWebview()))
                if(plus.storage.getItem("user")) { // 判断是否登录
                    console.log('已结登录了！');
                    //连接websocket连接
                    ws = new WebSocket("ws://" + window.ws_serv + "/app/" + plus.storage.getItem("user"))
                    // 客户端接收服务端数据时触发
                    ws.onmessage = function() {};
                }
                // 自动重连
                ws.onclose = function() {
                    window.location.reload();
                }
            });
    
            // 消息
            document.getElementById("message").addEventListener("tap", function() {
                mui.openWindow({
                    url: "message.html",
                    id: "message.html",
                    styles: window.styles,
                    extras: {
                        // 传输用户id,给message.html
                        user_id: plus.storage.getItem("user")
                    }
                })
            });
    
            document.getElementById("index").addEventListener("tap", function() {
                mui.openWindow({
                    url: "main.html",
                    id: "main.html",
                    styles: window.styles
                })
            })
    
            document.getElementById("login").addEventListener("tap", function() {
                // 自动登录,判断storage中的user存在，就跳转到user_info，否则跳转login
                if(plus.storage.getItem("user")) {
                    mui.openWindow({
                        url: "user_info.html",
                        id: "user_info.html",
                        styles: window.styles,
                        extras: {
                            user_id: plus.storage.getItem("user")
                        }
                    })
                } else {
                    mui.openWindow({
                        url: "login.html",
                        id: "login.html",
                        styles: window.styles
                    })
                }
            })
    
            document.addEventListener("login", function(data) {
                // fire事件接收消息，使用data.detail
                // index是为做显示区分
                mui.toast("index" + data.detail.msg)
            });
    
            document.addEventListener("send_music", function(data) { //监听send_music事件
                var music_name = data.detail.music_name; //获取player.html使用fire发送的music_name值
                var toy_id = data.detail.toy_id; //获取发送的玩具id
    
                send_str = { //构造数据
                    data: music_name,
                    to_user: toy_id, // 目标用户,这里统一格式
                    msg_type: "music", // 类型为音乐
                }
                // 发送数据给后端，注意要json序列化
                ws.send(JSON.stringify(send_str));
            });
    
            document.addEventListener("send_msg", function(data) { //发送消息
                var filename = data.detail.filename
                var to_user = data.detail.to_user
                send_str = {
                    to_user: to_user
                }
                ws.send(JSON.stringify(send_str))
                plus.io.resolveLocalFileSystemURL(filename, function(entry) {
                    // 可通过entry对象操作test.html文件 
                    entry.file(function(file) {
                        // FileReader文件系统中的读取文件对象，用于获取文件的内容
                        var fileReader = new plus.io.FileReader();
    
                        //                        alert("getFile:" + JSON.stringify(file));
                        // readAsDataURL: 以URL编码格式读取文件数据内容
                        fileReader.readAsDataURL(file, 'utf-8');
                        // onloadend: 文件读取操作完成时的回调函数
                        fileReader.onloadend = function(evt) {
                            console.log(evt.target.result);
                            var b = dataURLtoBlob(evt.target.result);
                            ws.send(b); // 发送blob数据
    
                        }
                        //                        alert(file.size + '--' + file.name)
                    });
                });
    
            })
    
            function dataURLtoBlob(dataurl) { // 数据转换为Blob
                // 逻辑很复杂,这里不解释了。直接用就可以了！
                var arr = dataurl.split(','),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                while(n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                var a = new Blob([u8arr], {
                    type: mime
                });
                return a
            }
        </script>
    
    </html>

进入 flask项目，修改 templates-->index.html，增加ws.onclose

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
    <audio src="" autoplay="autoplay" controls id="player"></audio>
    <br>
    <input type="text" id="device_id">
    <button οnclick="start_toy()">玩具开机键</button>
    <br>
    <button οnclick="start_reco()">开始废话</button>
    <br>
    <button οnclick="stop_reco()">发送语音</button>
    </body>
    <script src="/static/recorder.js"></script>
    <script src="/static/jquery.min.js"></script>
    <script type="application/javascript">
        var serv = "http://192.168.11.40:9527";
        var ws_serv = "ws://192.168.11.40:9528";
    
        // 获取音频文件
        var get_music = serv + "/get_audio/";
    
        var ws = null;  // WebSocket 对象
        var reco = null;
        // 创建AudioContext对象
        var audio_context = new AudioContext();
        //要获取音频和视频
        navigator.getUserMedia = (navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia);
    
        // 拿到媒体对象，允许音频对象
        navigator.getUserMedia({audio: true}, create_stream, function (err) {
            console.log(err)
        });
    
        //创建媒体流容器
        function create_stream(user_media) {
            var stream_input = audio_context.createMediaStreamSource(user_media);
            // 给Recoder 创建一个空间，麦克风说的话，都可以录入。是一个流
            reco = new Recorder(stream_input);
    
        }
    
        function start_reco() {  //开始录音
            reco.record();  //往里面写流
        }
    
        function stop_reco() {  //停止录音
            reco.stop();  //停止写入流
            get_audio();  //调用自定义方法
            reco.clear();  //清空容器
        }
    
        function get_audio() {  // 获取音频
            reco.exportWAV(function (wav_file) {
                ws.send(wav_file);  //使用websocket连接发送数据给后端
            })
        }
    
        function start_toy() {  // 玩具开机
            // 获取输入的设备id
            var device_id = document.getElementById("device_id").value;
            // 发送post请求
            $.post(
                // 这里的地址必须是127.0.0.1,否则会有跨域问题
                "http://127.0.0.1:9527/device_toy_id",
                // 发送设备id
                {device_id: device_id},
                function (data) {
                    console.log(data);
                    toy_id = data.data.toy_id;  // 玩具id
                    // 修改audio标签的src属性
                    document.getElementById("player").src = get_music + data.data.audio;
                    if (toy_id) {  // 判断玩具id存在时
                        ws = new WebSocket(ws_serv + "/toy/" + toy_id);
                        ws.onmessage = function (data) {
                            // console.log(get_music + data.data);
                            var content = JSON.parse(data.data);  //反序列化数据
                            // 判断消息类型
                            if (content.msg_type == "chat") {
                                document.getElementById("player").src = get_chat + content.data;
                                document.getElementById("to_user").innerText = content.from_user;
                                console.log(content.from_user + "给你发送了一条消息");
                            }
                            if (content.msg_type == "music") {
                                document.getElementById("player").src = get_music + content.data;
                                console.log(content.from_user + "给你点播了歌儿");
                            }
                        };
                        ws.onclose = function () {
                            window.location.reload();
                        }
                    }
                }, "json"
                // 规定预期的服务器响应的数据类型为json
            );
        }
    
    
    </script>
    </html>

重启 im\_serv.py，就可以了！

# 二、简单的双向聊天 #

由于时间关系，详细步骤略...

![1341090-20180920221127835-1924685387.png][]

# 三、聊天记录存放数据库 #

由于时间关系，详细步骤略...

![1341090-20180920221253822-2066372547.png][]

# 四、消息提醒 #

由于时间关系，详细步骤略...

![1341090-20180920221315502-1280523730.png][]

# 五、玩具主动发起消息 #

由于时间关系，详细步骤略...

![1341090-20180920221346558-1486575130.png][]

# 六、玩具主动发起点播 #

由于时间关系，详细步骤略...

![1341090-20180920221346558-1486575130.png][]

可以点击歌曲，比如我要听 新年恰恰

今日总结：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

0.地址统一化管理：
        serv = "domain_name"
    
    1.多玩具端的遥控功能（必做）
        发送消息的时候，把遥控功能 开启
         send_str = {
                "code": 0,
                "from_user": uid,
                <加粗>"msg_type": "chat",</加粗>
                "data": f"{file_name}.mp3"
            }
        "msg_type": "chat" 判断是发消息 还是遥控点播
        服务端：
            1.收到一次 send 所以就要在收到字符串send 的时候判断"msg_type"=="music"
            2.other_user_socket = user_socket_dict.get(to_user)
                send_str = {
                    "code": 0,
                    "from_user": uid,
                    <加粗>"msg_type": "music",</加粗>
                    "data": msg_dict.get("data")
                }
                other_user_socket.send(json.dumps(send_str))
        玩具端：
            玩具段收到消息之后判断 msg_type 是getchat 还是getmusic
            if (content.msg_type == "chat") {
                document.getElementById("player").src = get_chat + content.data;
                console.log(content.from_user + "给你发送了一条消息");
            }
    
    2.简单的单向聊天 升级 双向聊天
        form_user : 寄件人
        to_user : 收件人
        
        收件人和寄件人 颠倒 就是回复消息
        
        app 在 index中给 chat 页面发送 fire事件用于创建消息条目
        
    
    3.聊天的记录 存放数据库
        chat add {sender ：发件人 ，msg：语音文件名 ，updated_at : 时间}
        
        app 聊天页面：
            每一次打开聊天窗口的时候发起post请求：
            获取chat表中的聊天记录，依次生成聊天信息，打印在窗口中
                
                
    4.消息提醒
        1.查询to_user用户的好友列表，当前自己在好友列表中的备注
        2.将备注合成语音
        3.将语音发送至玩具端
        4.玩具端收到消息后，按收取消息键，收取最后一条消息
        
        坑：未读，只能收取最后一条
            离线消息
    
    5.玩具主动发起消息
        1.将语音发送至服务端
        2.将语音转换成文本
        3.把文本进行 字符串儿 匹配 “发消息” in q -》 friend_name in q -> friend
        4.模拟friend给自己发了一条假消息
            {
                from_user : friend_id
            }
        5.玩具端收到 from_user 之后，可以开启对friend的消息发送了
        
    6.玩具主动发起点播：
        同 玩具主动发起消息

由于时间关系，无法演示效果...

完整代码，参考github：

[https://github.com/987334176/Intelligent\_toy/archive/v1.4.zip][https_github.com_987334176_Intelligent_toy_archive_v1.4.zip]

**未完待续...**

posted @ 2018-09-20 18:42 [肖祥][Link 1] 阅读( ...) 评论( ...) [编辑][Link 2] 收藏

[python _Day130_]: https://www.cnblogs.com/xiao987334176/p/9682628.html
[https_github.com_987334176_Intelligent_toy_archive_v1.3.zip]: https://github.com/987334176/Intelligent_toy/archive/v1.3.zip
[https_www.cnblogs.com_xiao987334176_p_9647993.html_autoid-3-4-0]: https://www.cnblogs.com/xiao987334176/p/9647993.html#autoid-3-4-0
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220202/446f5fdd6cd04df7afa408b663849893.png
[1341090-20180920200111365-1732675931.png]: /images/20220202/6cf73b444cfe408591ca2d96d2a28d22.png
[1341090-20180920195235419-324596113.png]: /images/20220202/0e87e14ac6154b1e98ded249e94a1e6e.png
[1341090-20180920200424224-1285538055.png]: /images/20220202/409ab86ebebe4601af88cfd35e651fbe.png
[1341090-20180920200655202-1150465363.png]: /images/20220202/2c8a40c66bb345b3882f3046456f1a51.png
[1341090-20180920221127835-1924685387.png]: /images/20220202/148999ada244443eb1f5376580f338ab.png
[1341090-20180920221253822-2066372547.png]: /images/20220202/44b5ee1e140e418ea24cd33e62f86a32.png
[1341090-20180920221315502-1280523730.png]: /images/20220202/be854a3934874f39b77dd9d84eb2fd92.png
[1341090-20180920221346558-1486575130.png]: /images/20220202/e8a230c9d42246f7a9e64c31c2acbda6.png
[https_github.com_987334176_Intelligent_toy_archive_v1.4.zip]: https://github.com/987334176/Intelligent_toy/archive/v1.4.zip
[Link 1]: https://www.cnblogs.com/xiao987334176/
[Link 2]: https://i.cnblogs.com/EditPosts.aspx?postid=9682628