先下载github代码，下面的操作，都是基于这个版本来的！
https://github.com/987334176/Intelligent_toy/archive/v1.4.zip
注意：由于涉及到版权问题，此附件没有图片和音乐。请参考链接，手动采集一下！
请参考链接：
https://www.cnblogs.com/xiao987334176/p/9647993.html#autoid-3-4-0
一、向app推送消息
redis安装
Redis项目并没有正式支持Windows。然而，微软OpenTeaGeo集团开发并维护了以WIN64为目标的Windows端口。链接如下：
https://github.com/MicrosoftArchive/redis/releases
目前最新版本是3.2
完整下载链接如下：
https://github.com/MicrosoftArchive/redis/releases/download/win-3.2.100/Redis-x64-3.2.100.msi
开始安装
注意：要勾选添加到系统环境变量
默认端口是6379
设置最大内存，这里不设置。表示不限制内存大小！
安装完成后，打开cmd窗口，运行命令
d: cd D:\Program Files\Redis redis-server.exe redis.windows.conf redis-cli
效果如下：
使用Python操作redis，需要安装模块redis
pip install redis
接下来的操作，会将消息数量，存在redis中！
显示消息数量
如果有消息来了，需要在底部选项卡中的消息按钮，显示角标。比如这样：
还有 好友列表，也要显示角标。谁发送了几条消息，比如这样：
消息按钮显示未读消息
进入flask项目，修改setting.py，增加redis配置
import pymongo
import os
import redis # 数据库配置
client = pymongo.MongoClient(host="127.0.0.1", port=27017)
MONGO_DB = client["bananabase"] REDIS_DB = redis.Redis(host="127.0.0.1",port=6379) 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 # 文件目录 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 = ""
API_KEY = "3v3igzCkVFUDwFByNEE12345"
SECRET_KEY = "jRnwLE7kzC1aRi2FD10OQY3y9O12345"
SPEECH = {
"spd": 4,
'vol': 5,
"pit": 8,
"per": 4
}
进入utils文件夹，创建文件 chat_redis.py
from setting import REDIS_DB
import json def save_msg(小甜甜,xiao):
""" key: xiao
{
小甜甜:5,
小豆芽:4
}
:return: """
res = json.loads(REDIS_DB.get(xiao))
res["小甜甜"] = 1
if res:
pass REDIS_DB.set(xiao,json.dumps(res))
看下面的示例图：
修改 chat_redis.py
from setting import REDIS_DB
import json def save_msg(sender, to_user): # 保存消息
# 1.查询一下xiao的Redis是否有数据
user_msg_redis = REDIS_DB.get(to_user)
if user_msg_redis:
# 2.将xiao的数据反序列化成字典 { sender : n }
user_msg_dict = json.loads(user_msg_redis)
# 3.判断有没有 sender 的用户发来的消息数量
if user_msg_dict.get(sender):
# 数量加1
user_msg_dict[sender] += 1
else:
# 第一次,初始值为1
user_msg_dict[sender] = 1
# 4.如果xiao是刚建立好的用户，他是没有消息的，字典是空
else:
user_msg_dict = {sender: 1} # 5.序列化用户消息字典user_msg_dict
user_msg_redis = json.dumps(user_msg_dict)
# 6.存回Redis
REDIS_DB.set(to_user, user_msg_redis) def get_msg_list(user): # 获取消息
user_msg_redis = REDIS_DB.get(user)
if user_msg_redis:
user_msg_dict = json.loads(user_msg_redis)
# 统计数量
user_msg_dict["count"] = sum(user_msg_dict.values())
else:
user_msg_dict = {"count":0} return user_msg_dict def get_user_msg_one(sender, to_user): # 获取一条消息
user_msg_redis = REDIS_DB.get(to_user)
if user_msg_redis:
user_msg_dict = json.loads(user_msg_redis)
if user_msg_dict.get(sender):
return user_msg_dict.get(sender)
修改 im_serv.py
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
from utils import baidu_ai
from utils import chat_redis
import setting
from bson import ObjectId
import time 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>} file_name = ""
to_user = ""
# 循环,接收消息
while True:
msg = user_socket.receive()
if type(msg) == bytearray:
file_name = f"{uuid4()}.wav"
file_path = os.path.join(CHAT_FILE, file_name)
with open(file_path, "wb") as f:
f.write(msg)
else:
msg_dict = json.loads(msg)
to_user = msg_dict.get("to_user")
msg_type = msg_dict.get("msg_type") if to_user and file_name:
other_user_socket = user_socket_dict.get(to_user)
if msg_type == "ai":
q = baidu_ai.audio2text(file_path)
print(q)
ret = baidu_ai.my_nlp(q, tid)
other_user_socket.send(json.dumps(ret))
else:
send_str = {
"code": 0,
"from_user": tid,
"msg_type": "chat",
"data": file_name
} if other_user_socket: # 当websocket连接存在时
chat_redis.save_msg(tid, to_user) # 保存消息到redis
# 发送数据
other_user_socket.send(json.dumps(send_str))
else:
# 离线消息
chat_redis.save_msg(tid, to_user) # 保存聊天记录到MongoDB
_add_chat(tid, to_user, send_str.get("data")) to_user = ""
file_name = "" @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: # 如果文件名和发送用户同上存在时
# 查询玩具信息
res = setting.MONGO_DB.toys.find_one({"_id": ObjectId(to_user)})
# 获取friend_remark
fri = [i.get("friend_remark") for i in res.get("friend_list") if i.get("friend_id") == uid][0]
msg_file_name = baidu_ai.text2audio(f"你有来自{fri}的消息") # 获取websocket对象
other_user_socket = user_socket_dict.get(to_user)
# 构造数据
send_str = {
"code": 0,
"from_user": uid,
"msg_type": "chat", # 聊天类型
# 后缀必须是mp3的
"data": msg_file_name
}
# 发送数据给前端页面
other_user_socket.send(json.dumps(send_str))
# 添加聊天记录到数据库
_add_chat(uid, to_user, f"{file_name}.mp3")
# 最后一定要清空这2个变量，否则造成混乱
file_name = ""
to_user = "" def _add_chat(sender, to_user, msg): # 添加聊天记录到数据库
chat_window = setting.MONGO_DB.chat.find_one({"user_list": {"$all": [sender, to_user]}})
if not chat_window.get("chat_list"):
chat_window["chat_list"] = [{
"sender": sender,
"msg": msg,
"updated_at": time.time(),
}]
res = setting.MONGO_DB.chat.update_one({"_id": ObjectId(chat_window.get("_id"))}, {"$set": chat_window})
else:
chat = {
"sender": sender,
"msg": msg,
"updated_at": time.time(),
}
res = setting.MONGO_DB.chat.update_one({"_id": ObjectId(chat_window.get("_id"))}, {"$push": {"chat_list": chat}}) return res 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 # 歌曲名
}
'''
重启 im_serv.py
打开网页，让 小甜甜 开机
点击 开始废话，使用麦克风说： 给小鱼 发消息。再点击发送语音！
此时，录制消息按钮后面，会出现 对方id
注意：小鱼 表示玩具对主人（xiao）的称呼
再点击 录制消息，说： hello。最后点击发送语音消息！
进入redis，查看消息，将网页中的 录制消息按钮后面的id复制过来
查看用户id的数据，可以发现数量为1
127.0.0.1:6379> get 5b9bb768e1253281608e96eb
"{\"5ba0f1f2e12532418089bf88\": 1}"
127.0.0.1:6379>
那么redis中的数据有了，就可以在APP中渲染了
进入HBuilder项目MyApp，修改 index.html，增加角标
<!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-chat">
<span class="mui-badge mui-badge-red" id="msg_count">0</span>
</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")) // 发送post请求
console.log(window.serv + "/get_msg_list");
mui.post(
// 访问消息列表
window.serv + "/get_msg_list", {
user_id: plus.storage.getItem("user")
},
function(data) {
console.log(JSON.stringify(data));
msg_data = data.data;
// 修改消息选项卡的角标数字
document.getElementById("msg_count").innerText = msg_data.count;
}
); // 客户端接收服务端数据时触发
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项目，修改 serv-->chat.py
from flask import Blueprint, request, jsonify
from setting import MONGO_DB
from setting import RET
from bson import ObjectId
from utils import chat_redis cht = Blueprint("cht", __name__) @cht.route("/chat_list", methods=["POST"])
def chat_list(): # 聊天记录列表
user_id = request.form.get("user_id")
friend_id = request.form.get("friend_id")
print(friend_id) chat_window = MONGO_DB.chat.find_one({"user_list": {"$all": [user_id, friend_id]}})
fri = MONGO_DB.toys.find_one({"_id": ObjectId(friend_id)})
baby_name = fri.get("baby_name")
cl = chat_window.get("chat_list") RET["code"] = 0
RET["msg"] = baby_name
RET["data"] = cl return jsonify(RET) @cht.route("/get_msg", methods=["POST"])
def get_msg(): # 获取聊天语言文件
user_id = request.form.get("user_id")
sender = request.form.get("sender")
chat_window = MONGO_DB.chat.find_one({"user_list": {"$all": [user_id, sender]}})
new_msg = chat_window.get("chat_list")[-1] RET["code"] = 0
RET["msg"] = ""
RET["data"] = new_msg.get("msg") return jsonify(RET) @cht.route("/get_msg_list", methods=["POST"])
def get_msg_list():
user_id = request.form.get("user_id")
user_msg_dict = chat_redis.get_msg_list(user_id) RET["code"] = 0
RET["msg"] = ""
RET["data"] = user_msg_dict return jsonify(RET)
重启 manager.py
打开模拟器，关闭里面的HBuilder进程，重新开启，效果如下：
效果就完成了！
聊天窗口显示未读消息
再来做 聊天窗口，显示角标。上面演示时，小甜甜 给 小鱼(主人) 发送了一条消息。
那么下图中的紫色框后面，应该显示数字1
那么如何实现呢？答案很简单，使用mui.openWindows打开message.html页面时，给它传一个参数msg_data。
参数大概是这个样子
"data":{"5ba0f1f2e12532418089bf88":1,"count":1}
5ba0f1f2e12532418089bf88 是 小甜甜 的_id。在toys表中可以查询！
修改 index.html
<!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-chat">
<span class="mui-badge mui-badge-red" id="msg_count">0</span>
</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对象
var msg_data = null; // 消息数据
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")) // 发送post请求
console.log(window.serv + "/get_msg_list");
mui.post(
// 访问消息列表
window.serv + "/get_msg_list", {
user_id: plus.storage.getItem("user")
},
function(data) {
console.log(JSON.stringify(data));
// {"code":0,"data":{"5ba0f1f2e12532418089bf88":1,"count":1},"msg":""}
msg_data = data.data;
// 修改消息选项卡的角标数字
document.getElementById("msg_count").innerText = msg_data.count;
}
); // 客户端接收服务端数据时触发
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"),
msg_data: msg_data,
// "data":{"5ba0f1f2e12532418089bf88":1,"count":1}
}
})
}); 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>
修改 message.html，渲染页面。create_content多加一个参数
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css" />
</head> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">我的好友</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view" id="friend_list"> </ul>
</div>
</body>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()
var Sdata = null;
mui.back = function(){}; // 加载HTML5Puls
mui.plusReady(function() {
Sdata = plus.webview.currentWebview();
// post请求
mui.post(
// 好友列表
window.serv + "/friend_list",
{user_id:Sdata.user_id},
function(data){
console.log(JSON.stringify(data));
// 循环好友列表
for (var i = 0; i < data.data.length; i++) {
// 执行自定义方法，渲染页面
create_content(data.data[i],Sdata.msg_data);
}
}
)
}); function create_content(content,msg_data){
// <li class="mui-table-view-cell mui-media">
// <a href="javascript:;">
// <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
// <div class="mui-media-body">
// 幸福
// <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
// </div>
// </a>
// </li>
// 角标
var spantag = document.createElement("span");
spantag.className = "mui-badge mui-badge-red";
// content是一个字典,要获取friend_id。不能使用get，只能使用.
// 如果获取不到,值为undefine
spantag.innerText = msg_data[content.friend_id] var litag = document.createElement("li");
litag.className = "mui-table-view-cell mui-media";
var atag = document.createElement("a");
atag.id = content.friend_id;
// 点击事件
atag.onclick = function(){
console.log(this.id);
open_chat(this.id); //执行自定义方法open_chat
} var imgtag = document.createElement("img");
imgtag.className = "mui-media-object mui-pull-left"; imgtag.src = "avatar/" + content.friend_avatar; var divtag = document.createElement("div");
divtag.className = "mui-media-body";
divtag.innerText = content.friend_remark;
var ptag = document.createElement("p");
ptag.className = "mui-ellipsis";
ptag.innerText = content.friend_name; litag.appendChild(atag);
atag.appendChild(imgtag);
atag.appendChild(divtag);
atag.appendChild(spantag);
divtag.appendChild(ptag); document.getElementById("friend_list").appendChild(litag);
} function open_chat(friend_id){ // 打开chat.html
mui.openWindow({
url:"chat.html",
id:"chat.html",
extras:{
// 传参给chat.html
friend_id:friend_id
}
})
} </script> </html>
使用模拟器重新访问，效果如下：
发现了 undefined，这个不应该出现角标。这个是一个已知的bug，有兴趣的人，可以修改一下。
提示：使用css中的display:none
角标重置
点击 小甜甜，再返回页面时，这里的角标应该重置为0。并且不显示才对。
前端操作
修改 message.html，触发点击事件时，角标重置为0
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css" />
</head> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">我的好友</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view" id="friend_list"> </ul>
</div>
</body>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()
var Sdata = null;
mui.back = function(){}; // 加载HTML5Puls
mui.plusReady(function() {
Sdata = plus.webview.currentWebview();
// post请求
mui.post(
// 好友列表
window.serv + "/friend_list",
{user_id:Sdata.user_id},
function(data){
console.log(JSON.stringify(data));
// 循环好友列表
for (var i = 0; i < data.data.length; i++) {
// 执行自定义方法，渲染页面
create_content(data.data[i],Sdata.msg_data);
}
}
)
}); function create_content(content,msg_data){
// <li class="mui-table-view-cell mui-media">
// <a href="javascript:;">
// <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
// <div class="mui-media-body">
// 幸福
// <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
// </div>
// </a>
// </li>
// 角标
var spantag = document.createElement("span");
spantag.className = "mui-badge mui-badge-red";
// content是一个字典,要获取friend_id。不能使用get，只能使用.
// 如果获取不到,值为undefine
spantag.innerText = msg_data[content.friend_id] var litag = document.createElement("li");
litag.className = "mui-table-view-cell mui-media";
var atag = document.createElement("a");
atag.id = content.friend_id;
// 点击事件
atag.onclick = function(){
console.log(this.id);
spantag.innerText = 0; // 重置为0
//执行自定义方法open_chat
open_chat(this.id); } var imgtag = document.createElement("img");
imgtag.className = "mui-media-object mui-pull-left"; imgtag.src = "avatar/" + content.friend_avatar; var divtag = document.createElement("div");
divtag.className = "mui-media-body";
divtag.innerText = content.friend_remark;
var ptag = document.createElement("p");
ptag.className = "mui-ellipsis";
ptag.innerText = content.friend_name; litag.appendChild(atag);
atag.appendChild(imgtag);
atag.appendChild(divtag);
atag.appendChild(spantag);
divtag.appendChild(ptag); document.getElementById("friend_list").appendChild(litag);
} function open_chat(friend_id){ // 打开chat.html
mui.openWindow({
url:"chat.html",
id:"chat.html",
extras:{
// 传参给chat.html
friend_id:friend_id
}
})
} </script> </html>
使用模拟器访问，效果如下：
可以发现，聊天列表返回时，已经重置为0了。但是底部现象卡还没有变动！莫急，下面来处理它。
怎么实现呢？由于index.html页面是母模，它只负责显示底部选项卡。
在chat.html页面给index.html，执行一个fire（开火）事件就可以了！但是：一个页面，只能fire一次。
由于chat.html已经存在了一个fire事件。所以只能在message.html做fire
修改 message.html，增加fire
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css" />
</head> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">我的好友</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view" id="friend_list"> </ul>
</div>
</body>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()
var Sdata = null;
mui.back = function(){}; // 加载HTML5Puls
mui.plusReady(function() {
Sdata = plus.webview.currentWebview();
// post请求
mui.post(
// 好友列表
window.serv + "/friend_list",
{user_id:Sdata.user_id},
function(data){
console.log(JSON.stringify(data));
// 循环好友列表
for (var i = 0; i < data.data.length; i++) {
// 执行自定义方法，渲染页面
create_content(data.data[i],Sdata.msg_data);
}
}
)
}); function create_content(content,msg_data){
// <li class="mui-table-view-cell mui-media">
// <a href="javascript:;">
// <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
// <div class="mui-media-body">
// 幸福
// <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
// </div>
// </a>
// </li>
// 角标
var spantag = document.createElement("span");
spantag.className = "mui-badge mui-badge-red";
// content是一个字典,要获取friend_id。不能使用get，只能使用.
// 如果获取不到,值为undefine
spantag.innerText = msg_data[content.friend_id] var litag = document.createElement("li");
litag.className = "mui-table-view-cell mui-media";
var atag = document.createElement("a");
atag.id = content.friend_id;
// 点击事件
atag.onclick = function(){
// console.log(this.id);
//执行自定义方法open_chat
open_chat(this.id,spantag.innerText);
spantag.innerText = 0; // 重置为0 } var imgtag = document.createElement("img");
imgtag.className = "mui-media-object mui-pull-left"; imgtag.src = "avatar/" + content.friend_avatar; var divtag = document.createElement("div");
divtag.className = "mui-media-body";
divtag.innerText = content.friend_remark;
var ptag = document.createElement("p");
ptag.className = "mui-ellipsis";
ptag.innerText = content.friend_name; litag.appendChild(atag);
atag.appendChild(imgtag);
atag.appendChild(divtag);
atag.appendChild(spantag);
divtag.appendChild(ptag); document.getElementById("friend_list").appendChild(litag);
} function open_chat(friend_id,cut_count){ // 打开chat.html
// 获取index.html
var index = plus.webview.getWebviewById("HBuilder")
// 执行fire
mui.fire(index,"cut_msg_count",{cut:cut_count})
mui.openWindow({
url:"chat.html",
id:"chat.html",
extras:{
// 传参给chat.html
friend_id:friend_id
}
})
} </script> </html>
修改 index.html，监听 cut_msg_count事件
<!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-chat">
<span class="mui-badge mui-badge-red" id="msg_count">0</span>
</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对象
var msg_data = null; // 消息数据
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")) // 发送post请求
console.log(window.serv + "/get_msg_list");
mui.post(
// 访问消息列表
window.serv + "/get_msg_list", {
user_id: plus.storage.getItem("user")
},
function(data) {
console.log(JSON.stringify(data));
// {"code":0,"data":{"5ba0f1f2e12532418089bf88":1,"count":1},"msg":""}
msg_data = data.data;
// 修改消息选项卡的角标数字
document.getElementById("msg_count").innerText = msg_data.count;
}
); // 客户端接收服务端数据时触发
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"),
msg_data: msg_data,
// "data":{"5ba0f1f2e12532418089bf88":1,"count":1}
}
})
}); 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)
});
}); }); // 监听cut_msg_count事件,由message.html向index.html执行fire
document.addEventListener("cut_msg_count", function(data) {
var msg_count = document.getElementById("msg_count");
var cut = parseInt(data.detail.cut); // parseInt表示强制转换
var count = parseInt(msg_count.innerText); // 默认获取innerText是字符串,需要强制转换
msg_count.innerText = count - cut; // 总数 减去 点击聊天会话的数量,比如小甜甜的
}); 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>
效果如下：
可以发现，底部选项卡，也变成0了
后端操作
那是因为后端redis的数据没有更改。
进入flask项目，修改 utils-->chat_redis.py
from setting import REDIS_DB
import json def save_msg(sender, to_user): # 保存消息
# 1.查询一下xiao的Redis是否有数据
user_msg_redis = REDIS_DB.get(to_user)
if user_msg_redis:
# 2.将xiao的数据反序列化成字典 { sender : n }
user_msg_dict = json.loads(user_msg_redis)
# 3.判断有没有 sender 的用户发来的消息数量
if user_msg_dict.get(sender):
# 数量加1
user_msg_dict[sender] += 1
else:
# 第一次,初始值为1
user_msg_dict[sender] = 1
# 4.如果xiao是刚建立好的用户，他是没有消息的，字典是空
else:
user_msg_dict = {sender: 1} # 5.序列化用户消息字典user_msg_dict
user_msg_redis = json.dumps(user_msg_dict)
# 6.存回Redis
REDIS_DB.set(to_user, user_msg_redis) def get_msg_list(user): # 获取消息
user_msg_redis = REDIS_DB.get(user)
if user_msg_redis:
user_msg_dict = json.loads(user_msg_redis)
# 统计数量
user_msg_dict["count"] = sum(user_msg_dict.values())
else:
user_msg_dict = {"count":0} return user_msg_dict def get_user_msg_one(sender, to_user): # 获取用户一个好友消息
user_msg_redis = REDIS_DB.get(to_user)
if user_msg_redis:
user_msg_dict = json.loads(user_msg_redis)
if user_msg_dict.get(sender):
# return user_msg_dict.get(sender)
user_msg_dict[sender] = 0 else:
user_msg_dict = {sender:0} user_msg_redis = json.dumps(user_msg_dict)
REDIS_DB.set(to_user,user_msg_redis) # 修改redis
修改 serv-->chat.py，增加 chat_redis.get_user_msg_one
from flask import Blueprint, request, jsonify
from setting import MONGO_DB
from setting import RET
from bson import ObjectId
from utils import chat_redis cht = Blueprint("cht", __name__) @cht.route("/chat_list", methods=["POST"])
def chat_list(): # 聊天记录列表
user_id = request.form.get("user_id")
friend_id = request.form.get("friend_id")
print(friend_id) chat_window = MONGO_DB.chat.find_one({"user_list": {"$all": [user_id, friend_id]}})
fri = MONGO_DB.toys.find_one({"_id": ObjectId(friend_id)})
baby_name = fri.get("baby_name")
cl = chat_window.get("chat_list") RET["code"] = 0
RET["msg"] = baby_name
RET["data"] = cl # 获取用户单个好友记录,修改redis的值
chat_redis.get_user_msg_one(friend_id,user_id) return jsonify(RET) @cht.route("/get_msg", methods=["POST"])
def get_msg(): # 获取聊天语言文件
user_id = request.form.get("user_id")
sender = request.form.get("sender")
chat_window = MONGO_DB.chat.find_one({"user_list": {"$all": [user_id, sender]}})
new_msg = chat_window.get("chat_list")[-1] RET["code"] = 0
RET["msg"] = ""
RET["data"] = new_msg.get("msg") return jsonify(RET) @cht.route("/get_msg_list", methods=["POST"])
def get_msg_list():
user_id = request.form.get("user_id")
user_msg_dict = chat_redis.get_msg_list(user_id) RET["code"] = 0
RET["msg"] = ""
RET["data"] = user_msg_dict return jsonify(RET)
打开夜神模拟器，重启 里面的HBuilder APP。再次点击，查看redis
127.0.0.1:6379> get 5b9bb768e1253281608e96eb
"{\"5ba0f1f2e12532418089bf88\": 0}"
发现已经更新为0了
消息增加
但是发消息，可能不止一条。如果有消息，角标的数字应该自动加。
进入 HBuilder项目MyApp，修改index.html
<!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-chat">
<span class="mui-badge mui-badge-red" id="msg_count">0</span>
</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对象
var msg_data = null; // 消息数据
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")) // 发送post请求
console.log(window.serv + "/get_msg_list");
mui.post(
// 访问消息列表
window.serv + "/get_msg_list", {
user_id: plus.storage.getItem("user")
},
function(data) {
console.log(JSON.stringify(data));
// {"code":0,"data":{"5ba0f1f2e12532418089bf88":1,"count":1},"msg":""}
msg_data = data.data;
// 修改消息选项卡的角标数字
document.getElementById("msg_count").innerText = msg_data.count;
}
); // 客户端接收服务端数据时触发
ws.onmessage = function(data) {
console.log(data.data);
var msg = JSON.parse(data.data);
var chat = plus.webview.getWebviewById("chat.html");
mui.fire(chat, "new_msg", { // 向chat.html传值
data: msg
});
var msg_count = document.getElementById("msg_count");
// 当前页面加1
msg_count.innerText = parseInt(msg_count.innerText) + 1;
// 加1,用于message.html显示
msg_data[msg.from_user]++;
};
}
// 自动重连
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"),
msg_data: msg_data,
// "data":{"5ba0f1f2e12532418089bf88":1,"count":1}
}
})
}); 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)
});
}); }); // 监听cut_msg_count事件,由message.html向index.html执行fire
document.addEventListener("cut_msg_count", function(data) {
var msg_count = document.getElementById("msg_count");
var cut = parseInt(data.detail.cut); // parseInt表示强制转换
var count = parseInt(msg_count.innerText); // 默认获取innerText是字符串,需要强制转换
msg_count.innerText = count - cut; // 总数 减去 点击聊天会话的数量,比如小甜甜的
}); 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>
打开网页，发送消息
发送2条消息
这里会实时变化
这里还是0，是因为这个页面的plusReady只会加载一次。这个是一个小bug
如果关闭进程，再次开启，就会有了！
进入 flask后端，修改im_serv.py
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
from utils import baidu_ai
from utils import chat_redis
import setting
from bson import ObjectId
import time 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>} file_name = ""
to_user = ""
# 循环,接收消息
while True:
msg = user_socket.receive()
if type(msg) == bytearray:
file_name = f"{uuid4()}.wav"
file_path = os.path.join(CHAT_FILE, file_name)
with open(file_path, "wb") as f:
f.write(msg)
else:
msg_dict = json.loads(msg)
to_user = msg_dict.get("to_user")
msg_type = msg_dict.get("msg_type") if to_user and file_name:
other_user_socket = user_socket_dict.get(to_user)
if msg_type == "ai":
q = baidu_ai.audio2text(file_path)
print(q)
ret = baidu_ai.my_nlp(q, tid)
other_user_socket.send(json.dumps(ret))
else:
send_str = {
"code": 0,
"from_user": tid,
"msg_type": "chat",
"data": file_name
} if other_user_socket: # 当websocket连接存在时
chat_redis.save_msg(tid, to_user) # 保存消息到redis
# 发送数据
other_user_socket.send(json.dumps(send_str))
else:
# 离线消息
chat_redis.save_msg(tid, to_user) # 保存聊天记录到MongoDB
_add_chat(tid, to_user, send_str.get("data")) to_user = ""
file_name = "" @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: # 如果文件名和发送用户同上存在时
# 查询玩具信息
res = setting.MONGO_DB.toys.find_one({"_id": ObjectId(to_user)})
# 获取friend_remark
fri = [i.get("friend_remark") for i in res.get("friend_list") if i.get("friend_id") == uid][0]
msg_file_name = baidu_ai.text2audio(f"你有来自{fri}的消息") # 获取websocket对象
other_user_socket = user_socket_dict.get(to_user)
# 构造数据
send_str = {
"code": 0,
"from_user": uid,
"msg_type": "chat", # 聊天类型
# 后缀必须是mp3的
"data": msg_file_name
}
if other_user_socket:
chat_redis.save_msg(uid, to_user)
# 发送数据给前端页面
other_user_socket.send(json.dumps(send_str))
else:
# 保存redis
chat_redis.save_msg(uid, to_user) # 添加聊天记录到数据库
_add_chat(uid, to_user, f"{file_name}.mp3")
# 最后一定要清空这2个变量，否则造成混乱
file_name = ""
to_user = "" def _add_chat(sender, to_user, msg): # 添加聊天记录到数据库
chat_window = setting.MONGO_DB.chat.find_one({"user_list": {"$all": [sender, to_user]}})
if not chat_window.get("chat_list"):
chat_window["chat_list"] = [{
"sender": sender,
"msg": msg,
"updated_at": time.time(),
}]
res = setting.MONGO_DB.chat.update_one({"_id": ObjectId(chat_window.get("_id"))}, {"$set": chat_window})
else:
chat = {
"sender": sender,
"msg": msg,
"updated_at": time.time(),
}
res = setting.MONGO_DB.chat.update_one({"_id": ObjectId(chat_window.get("_id"))}, {"$push": {"chat_list": chat}}) return res 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 # 歌曲名
}
'''
给小甜甜发送消息，可能不止一条。后端收取消息，要有多条
修改 serv-->chat.py，改为[-count:] 。如果是2条，就是[-2:]。表示最后2条！
from flask import Blueprint, request, jsonify
from setting import MONGO_DB
from setting import RET
from bson import ObjectId
from utils import chat_redis cht = Blueprint("cht", __name__) @cht.route("/chat_list", methods=["POST"])
def chat_list(): # 聊天记录列表
user_id = request.form.get("user_id")
friend_id = request.form.get("friend_id")
print(friend_id) chat_window = MONGO_DB.chat.find_one({"user_list": {"$all": [user_id, friend_id]}})
fri = MONGO_DB.toys.find_one({"_id": ObjectId(friend_id)})
baby_name = fri.get("baby_name")
cl = chat_window.get("chat_list") RET["code"] = 0
RET["msg"] = baby_name
RET["data"] = cl # 获取用户单个好友记录,修改redis的值
chat_redis.get_user_msg_one(friend_id,user_id) return jsonify(RET) @cht.route("/get_msg", methods=["POST"])
def get_msg(): # 获取聊天语言文件
user_id = request.form.get("user_id")
sender = request.form.get("sender")
count = 1 # 初始值
if not sender:
msg_dict = chat_redis.get_msg_list(user_id)
print(msg_dict,"msg_dict")
sender = list(msg_dict.keys())[0]
count = msg_dict[sender]
else:
# 获取用户某个好友的值
count = chat_redis.get_user_msg_one(sender,user_id) # $all 表示多个条件都成立时。这里表示user_list字段中user_id和sender必须都存在才行！
chat_window = MONGO_DB.chat.find_one({"user_list": {"$all": [user_id, sender]}})
# [-count:] 表示获取最后的几条消息。比如： -1: 表示最后一条
new_msg = chat_window.get("chat_list")[-count:] RET["code"] = 0
RET["msg"] = ""
RET["data"] = new_msg # chat_redis.get_user_msg_one(sender,user_id) return jsonify(RET) @cht.route("/get_msg_list", methods=["POST"])
def get_msg_list():
user_id = request.form.get("user_id")
user_msg_dict = chat_redis.get_msg_list(user_id) RET["code"] = 0
RET["msg"] = ""
RET["data"] = user_msg_dict return jsonify(RET)
修改 utils-->chat_redis.py
from setting import REDIS_DB
import json def save_msg(sender, to_user): # 保存消息
# 1.查询一下xiao的Redis是否有数据
user_msg_redis = REDIS_DB.get(to_user)
if user_msg_redis:
# 2.将xiao的数据反序列化成字典 { sender : n }
user_msg_dict = json.loads(user_msg_redis)
# 3.判断有没有 sender 的用户发来的消息数量
if user_msg_dict.get(sender):
# 数量加1
user_msg_dict[sender] += 1
else:
# 第一次,初始值为1
user_msg_dict[sender] = 1
# 4.如果xiao是刚建立好的用户，他是没有消息的，字典是空
else:
user_msg_dict = {sender: 1} # 5.序列化用户消息字典user_msg_dict
user_msg_redis = json.dumps(user_msg_dict)
# 6.存回Redis
REDIS_DB.set(to_user, user_msg_redis) def get_msg_list(user): # 获取消息
user_msg_redis = REDIS_DB.get(user)
if user_msg_redis:
user_msg_dict = json.loads(user_msg_redis)
# 统计数量
user_msg_dict["count"] = sum(user_msg_dict.values())
else:
user_msg_dict = {"count":0} return user_msg_dict def get_user_msg_one(sender, to_user): # 获取用户一个好友消息
user_msg_redis = REDIS_DB.get(to_user)
if user_msg_redis:
user_msg_dict = json.loads(user_msg_redis)
if user_msg_dict.get(sender):
return user_msg_dict.get(sender)
# user_msg_dict[sender] = 0 else:
user_msg_dict = {sender:0} user_msg_redis = json.dumps(user_msg_dict)
REDIS_DB.set(to_user,user_msg_redis) # 修改redis
修改index.html，使用player.onended。它会接收多条
<!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 onclick="start_toy()">玩具开机键</button>
<br>
<button onclick="start_reco()">开始废话</button>
<br>
<button onclick="stop_reco()">发送语音</button>
<br>
<button onclick="start_reco()">录制消息</button>
<span id="to_user"></span>
<br>
<button onclick="send_reco()">发送语音消息</button>
<br>
<button onclick="recv_msg()">收取消息</button>
</body>
<script src="/static/recorder.js"></script>
<script src="/static/jquery.min.js"></script>
<script type="application/javascript">
var serv = "http://127.0.0.1:9527";
var ws_serv = "ws://127.0.0.1:9528"; // 获取音频文件
var get_music = serv + "/get_audio/";
var get_chat = serv + "/get_chat/"; var ws = null; // WebSocket 对象
var reco = null;
// 创建AudioContext对象
var audio_context = new AudioContext(); var toy_id = null; //要获取音频和视频
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 send_reco() {
reco.stop();
send_audio();
reco.clear();
} function send_audio() {
var to_user = document.getElementById("to_user").innerText;
var send_str = {
"to_user": to_user
};
ws.send(JSON.stringify(send_str));
reco.exportWAV(function (wav_file) {
ws.send(wav_file);
})
} function get_audio() { var send_str = {
"to_user": toy_id,
"msg_type": "ai"
};
ws.send(JSON.stringify(send_str));
reco.exportWAV(function (wav_file) {
ws.send(wav_file);
})
} 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
);
} function recv_msg() {
var to_user = document.getElementById("to_user").innerText;
var player = document.getElementById("player"); to_user = document.getElementById("to_user").innerText;
$.post(
serv + "/get_msg",
{user_id: toy_id, sender: to_user},
function (data) {
// shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
var msg = data.data.shift();
document.getElementById("to_user").innerText = msg.sender;
player.src = get_chat + msg.msg; //修改audio标签src属性
// onended 事件在视频/音频(audio/video)播放结束时触发
player.onended = function () {
// 如果长度大于0,也就是有1条或者多条时
if(data.data.length > 0){
//修改audio标签src属性，有多条时，会轮询触发
player.src = get_chat + data.data.shift().msg;
}else{
return null;
}
}
}, "json"
)
} </script>
</html>
重启 manager.py和im_serv.py
重新访问网页，让玩具开机。连续录制2个语音
再点击收取消息，网页会先播放一条，再紧着播放第二条！
二、玩具端消息推送
APP发送语音后，页面语音提示，你有来自 xx 的消息
修改 serv-->chat.py，修改get_msg视图函数
from flask import Blueprint, request, jsonify
from setting import MONGO_DB
from setting import RET
from bson import ObjectId
from utils import chat_redis cht = Blueprint("cht", __name__) @cht.route("/chat_list", methods=["POST"])
def chat_list(): # 聊天记录列表
user_id = request.form.get("user_id")
friend_id = request.form.get("friend_id")
print(friend_id) chat_window = MONGO_DB.chat.find_one({"user_list": {"$all": [user_id, friend_id]}})
fri = MONGO_DB.toys.find_one({"_id": ObjectId(friend_id)})
baby_name = fri.get("baby_name")
cl = chat_window.get("chat_list") RET["code"] = 0
RET["msg"] = baby_name
RET["data"] = cl # 获取用户单个好友记录,修改redis的值
chat_redis.get_user_msg_one(friend_id,user_id) return jsonify(RET) @cht.route("/get_msg", methods=["POST"])
def get_msg(): # 获取聊天语言文件
user_id = request.form.get("user_id")
sender = request.form.get("sender")
count = 1 # 初始值
if not sender:
msg_dict = chat_redis.get_msg_list(user_id)
# print(msg_dict,"msg_dict")
# 未读数量
sender = [i for i in msg_dict.keys() if msg_dict[i] != 0 and i != "count"]
if sender:
sender = sender[0]
count = msg_dict[sender]
else:
pass # 没有任何消息了，可以调用合成语言，提示一下
# filename= baidu_ai.text2audio("")
# new_msg = [{sender:"",msg:filename}]
else:
# 获取用户某个好友的值
count = chat_redis.get_user_msg_one(sender,user_id) # $all 表示多个条件都成立时。这里表示user_list字段中user_id和sender必须都存在才行！
chat_window = MONGO_DB.chat.find_one({"user_list": {"$all": [user_id, sender]}})
# [-count:] 表示获取最后的几条消息。比如： -1: 表示最后一条
new_msg = chat_window.get("chat_list")[-count:]
# 这里可以提示,您收到来自xx的几条消息
# filename= baidu_ai.text2audio("")
# new_msg.insert(0,{
# "sender":sender,
# "msg":filename
# }) RET["code"] = 0
RET["msg"] = ""
RET["data"] = new_msg chat_redis.get_user_msg_one(sender,user_id) return jsonify(RET) @cht.route("/get_msg_list", methods=["POST"])
def get_msg_list():
user_id = request.form.get("user_id")
user_msg_dict = chat_redis.get_msg_list(user_id) RET["code"] = 0
RET["msg"] = ""
RET["data"] = user_msg_dict return jsonify(RET)
重启 manager.py和im_serv.py
使用App发送2条消息
玩具页面会有语音提示，你有来自 小鱼的消息
点击收取消息。会自动播放2条语音！
今日总结：
1.向app推送消息
Redis 中存储消息：
to_user : { sender : 1 } 消息按钮 未读消息
在message点击打开 chat_window的时候 发起一个fire(cut)事件给index页面
index页面 根据 cut 值进行删减 角标的数字 chat_window 未读消息
message页面将未读消息数字置空 = 0
chat_window 页面 发起的 chat_list 请求，加入逻辑 将redis中的未读消息置空 = 0 2.玩具端消息推送
消息列表 - 区分用户
array.shift() 删除array中的第一个元素并返回
批量收取一个用户的消息
AudioContext.onended = function(){
AudioContext.src = "music.mp3"
} 批量收取消息的逻辑：
1.从sender未读消息中拿出未读数量 未读数量不是 0
2.从chat_list中拿出最后的几条未读消息
完整代码，参考github:
https://github.com/987334176/Intelligent_toy/archive/v1.5.zip