简介
今天想要使用PyQt5结合Websocket实现一个小小的QQ聊天界面。
介绍一下我实现这个功能的具体思路:GUI界面运行起来后,创建一个线程去连接Websocket服务器,然后主界面类中实现了websocket的基本回调函数。比如,发送消息的回调函数send_message、接收消息的回调函数on_message等等。当接收到消息时,会在线程中调用on_message函数来对接收到的消息进行处理。原本我计划是在这个回调函数中进行对界面上的聊天消息界面进行更新的。结果就在这里遇到了这个问题,阻挡了我前进的步伐。就是PyQt5 GUI模块不允许在多线程中进行操作。也就是说,咱们在线程中是不能对界面GUI模块进行修改的。(应该是吧)
原本的代码
import json
import sys
import threadingimport pymysql
from PyQt5 import QtGui, QtWidgets, QtCore
from PyQt5.QtGui import QColor
from PyQt5.QtWidgets import QApplication, QGraphicsDropShadowEffect, QMessageBox, QListWidgetItem
from PyQt5.QtCore import Qtfrom Assets.MessageItem import OtherMessageItem
from Assets.MessageItemMy import MyMessageItem
from ui.chat_page import Ui_Form
import websocketclass chatPage(QtWidgets.QWidget, Ui_Form):def __init__(self, my_user_id, other_user_id):super(chatPage, self).__init__()self.setupUi(self) # 初始化Ui函self.client_id = my_user_idself.other_id = other_user_idself.history_message = [] # 历史消息列表self.widget_2.setLayout(QtWidgets.QVBoxLayout())self.widget_2.setStyleSheet("border:none; background:transparent;")# 连接WebSocket服务器uri = f"ws://localhost:8000/ws/{self.client_id}"self.ws = websocket.WebSocketApp(uri,on_message=self.on_message,on_error=self.on_error,on_close=self.on_close,on_open=self.send_message)self.init_ui() # 初始化界面self.init_solt() # 初始化槽函数# 在单独的线程中启动 WebSocketself.ws_thread = threading.Thread(target=self.ws.run_forever)self.ws_thread.start()def init_ui(self):""":return:"""Qt.FramelessWindowHint无边框窗口特性。在没有边框的情况下,窗口的默认行为可能不再包含拖动窗口的功能。如果您希望添加阴影效果却又想要保留移动窗口的功能,您可以考虑实现自定义的拖动窗口功能。这涉及到捕获鼠标按下、移动和释放事件,并据此更新窗口的位置。self.setWindowFlags(Qt.WindowStaysOnTopHint | Qt.FramelessWindowHint | Qt.Tool) # 窗口置顶,无边框,在任务栏不显示图标shadow = QGraphicsDropShadowEffect() # 设定一个阴影,半径为10,颜色为#444444,定位为0,0shadow.setBlurRadius(10)shadow.setColor(QColor("#444444"))shadow.setOffset(0, 0)self.frame.setGraphicsEffect(shadow) # 为frame设定阴影效果self.init_history_message()def init_solt(self):"""初始化槽函数:return:"""self.pushBtn.clicked.connect(self.send_message) # 按钮发送消息def init_history_message(self):"""初始化好友列表:return:"""passdef show_history_message(self):"""初始化聊天记录:return:"""self.chat_list = QtWidgets.QListWidget()self.chat_list.setItemDelegate(NoHoverDelegate(self.chat_list))# 显示聊天记录for items in self.history_message:print(items)sender = items[1]if sender == self.client_id:item = MyMessageItem(data=items[0])else:item = OtherMessageItem(data=items[0])listwitem = QListWidgetItem(self.chat_list)listwitem.setSizeHint(QtCore.QSize(200, 70))self.chat_list.setItemWidget(listwitem, item)layout = self.widget_2.layout()layout.addWidget(self.chat_list)self.chat_list.update()self.chat_list.scrollToBottom() # 自动滚动到底部print('聊天记录显示完成')def send_message(self):"""发送消息:return:"""message = self.textEdit.toPlainText()if message: # 只有当消息不为空时才发送message_dict = {"receiver_id": self.other_id,"content": message,"client_id": self.client_id}self.ws.send(json.dumps(message_dict))self.textEdit.clear() # 清空输入框returnQMessageBox.information(self, "提示", "发送的消息不能为空")def on_message(self, ws, message):"""# 接收消息回调函数:param message::return:"""if message == '消息已发送给对方' or message == '对方不在线,消息已发布到RabbitMQ,稍后将会推送给对方':print('接收到消息:', message)return# 原本是在这里对界面进行更新print(message)data = (message, self.other_id)self.history_message.append(data)# 刷新界面# self.show_history_message()sender = self.other_iditem = MyMessageItem(data=message) if sender == self.client_id else OtherMessageItem(data=message)listwitem = QListWidgetItem(self.chat_list)listwitem.setSizeHint(QtCore.QSize(200, 70))self.chat_list.addItem(listwitem)self.chat_list.setItemWidget(listwitem, item)self.chat_list.scrollToBottom() # 自动滚动到底部self.chat_list.update()def on_error(self, ws, error):"""# 错误回调函数:param ws::param error::return:"""passdef on_close(self, ws):"""# 关闭websocket回调函数:param ws:"""ws.close()def mousePressEvent(self, event):self.click_pos = event.globalPos()def mouseMoveEvent(self, event):if self.click_pos:delta = event.globalPos() - self.click_posself.move(self.pos() + delta)self.click_pos = event.globalPos()def mouseReleaseEvent(self, event):self.click_pos = Noneif __name__ == '__main__':app = QApplication(sys.argv)login_page = chatPage('738053369', '545247018')login_page.show()sys.exit(app.exec_())
解决思路
既然线程中对GUI界面进行操作,那么我们只能在主线程对新消息进行处理并显示到界面上。所以
,我初始化的时候,定义了一个定时器,和一个用来存储接收到消息的列表。当on_message回调函数接收到新消息时会将接收到的消息存储到这个列表中。定时器会定时地去检查这个列表,一旦发现这个列表不为空,那么就将列表中的消息取出然后刷新聊天界面。
具体代码:
# encoding: utf-8
# @author: DayDreamer
# @file: chat_page.py
# @time: 2024/6/27 20:34
# @desc:
"""
Your time is limited,So don't waste it living in someone else's life.
And most important,
Have the courage to follow your heart and intuition.
They somehow already know
What you truly want to become,Everything else is secondary。
"""
import asyncio
import hashlib
import json
import random
import sys
import threadingimport pymysql
from PyQt5 import QtGui, QtWidgets, QtCore
from PyQt5.QtGui import QColor
from PyQt5.QtWidgets import QApplication, QGraphicsDropShadowEffect, QMessageBox, QListWidgetItem
from PyQt5.QtCore import Qt, QTimer, QSizefrom Assets.MessageItem import OtherMessageItem
from Assets.MessageItemMy import MyMessageItem
from db.mysql_orm.crud import Register_new_user
from lib.encrypted import encrypted_pwd
from lib.new_account import create_new_account
from lib.sent_account import message_sent_account
from lib.sql_command import is_exists
from ui.chat_page import Ui_Form
import websocketclass NoHoverDelegate(QtWidgets.QStyledItemDelegate):"""自定义委托以禁用悬停效果"""def paint(self, painter, option, index):if option.state & QtWidgets.QStyle.State_MouseOver:option.state = option.state & ~QtWidgets.QStyle.State_MouseOversuper().paint(painter, option, index)class chatPage(QtWidgets.QWidget, Ui_Form):# registered_window = QtCore.pyqtSignal() # 跳转信号def __init__(self, my_user_id, other_user_id):super(chatPage, self).__init__()self.setupUi(self) # 初始化Ui函self.flag = False # 标记是否已发送消息self.client_id = my_user_idself.other_id = other_user_id# 创建一个定时器,用于定时地更新聊天记录self.timer = QTimer(self)self.timer.timeout.connect(self.update_chat_list)self.history_message_new = [] # 历史消息列表,用于接收新的消息self.timer.start(1000) # 1000ms刷新一次self.history_message = [] # 历史消息列表self.history_message = [] # 历史消息列表self.widget_2.setLayout(QtWidgets.QVBoxLayout())self.widget_2.setStyleSheet("border:none; background:transparent;")# 连接Websocket服务器uri = f"ws://localhost:8000/ws/{self.client_id}"self.ws = websocket.WebSocketApp(uri,on_message=self.on_message,on_error=self.on_error,on_close=self.on_close,on_open=self.send_message)self.init_ui() # 初始化界面self.init_solt() # 初始化槽函数# 在单独的线程中启动 WebSocketself.ws_thread = threading.Thread(target=self.ws.run_forever)self.ws_thread.start()def init_ui(self):"""# Author: Daydreamer初始化界面:return:""""""Qt.FramelessWindowHint无边框窗口特性。在没有边框的情况下,窗口的默认行为可能不再包含拖动窗口的功能。如果您希望添加阴影效果却又想要保留移动窗口的功能,您可以考虑实现自定义的拖动窗口功能。这涉及到捕获鼠标按下、移动和释放事件,并据此更新窗口的位置。:return: """self.setWindowFlags(Qt.WindowStaysOnTopHint | Qt.FramelessWindowHint | Qt.Tool) # 窗口置顶,无边框,在任务栏不显示图标shadow = QGraphicsDropShadowEffect() # 设定一个阴影,半径为10,颜色为#444444,定位为0,0shadow.setBlurRadius(10)shadow.setColor(QColor("#444444"))shadow.setOffset(0, 0)self.frame.setGraphicsEffect(shadow) # 为frame设定阴影效果self.init_history_message() # 初始化聊天记录def init_solt(self):"""初始化槽函数:return:"""self.pushBtn.clicked.connect(self.send_message) # 按钮发送消息def init_rabbitmq_history_message(self):"""# Author: Daydreamer初始化RabbitMQ中的聊天记录,这些聊天记录是在用户离线时该好友发送给他的消息,在用户上线后,该好友会将这些消息推送给他。:return:"""passdef init_history_message(self):"""# Author: Daydreamer初始化和该好友的历史聊天记录:return:"""passdef show_history_message(self):"""# Author: Daydreamer初始化聊天记录,将历史消息显示在聊天列表中:return:"""self.chat_list = QtWidgets.QListWidget() # 创建一个聊天列表self.chat_list.setItemDelegate(NoHoverDelegate(self.chat_list)) # 禁用悬停效果# 遍历聊天记录列表,将消息显示在聊天列表中for items in self.history_message:print(items)sender = items[1]if sender == self.client_id: # 判断消息的发送者是自己还是对方item = MyMessageItem(data=items[0])else:item = OtherMessageItem(data=items[0])listwitem = QListWidgetItem(self.chat_list)listwitem.setSizeHint(QtCore.QSize(200, 70))self.chat_list.setItemWidget(listwitem, item)layout = self.widget_2.layout()layout.addWidget(self.chat_list)self.chat_list.update()self.chat_list.scrollToBottom() # 自动滚动到底部print('聊天记录显示完成')def send_message(self):"""# Author: Daydreamer发送消息到Websocket服务器:return:"""message = self.textEdit.toPlainText()if message: # 只有当消息不为空时才发送message_dict = {"receiver_id": self.other_id,"content": message,"client_id": self.client_id}self.ws.send(json.dumps(message_dict))self.textEdit.clear() # 清空输入框# TODO 将消息保存到数据库returnQMessageBox.information(self, "提示", "发送的消息不能为空")def on_message(self, ws, message):"""# Author: Daydreamer# 接收消息回调函数:param message::return:"""# ATTENTION: 这里的on_message是在线程中执行的,所以,在这里面进行界面更新是不对的,应该在主线程中进行界面更新(因为PyQt5的GUI模块是不允许在多线程中进行操作的)if message == '消息已发送给对方' or message == '对方不在线,消息已发布到RabbitMQ,稍后将会推送给对方':print('接收到消息:', message)returnprint(message)data = (message, self.other_id)self.history_message_new.append(data) # 将接收到的消息添加到历史消息列表中,方便PyQt的定时任务刷新界面def update_chat_list(self):"""# Author: Daydreamer# 定时刷新聊天记录:return:"""if len(self.history_message_new) > 0:print('开始更新界面')item = OtherMessageItem(data=self.history_message_new[0][0])listwitem = QListWidgetItem(self.chat_list)listwitem.setSizeHint(QSize(200, 70))self.chat_list.addItem(listwitem)self.chat_list.setItemWidget(listwitem, item)self.chat_list.scrollToBottom()print('刷新成功')# 将历史消息列表清空, 以方便新消息的接收self.history_message_new.clear()def on_error(self, ws, error):"""# 错误回调函数:param ws::param error::return:"""passdef on_close(self, ws):"""# 关闭websocket回调函数:param ws:"""ws.close()def mousePressEvent(self, event):self.click_pos = event.globalPos()def mouseMoveEvent(self, event):if self.click_pos:delta = event.globalPos() - self.click_posself.move(self.pos() + delta)self.click_pos = event.globalPos()def mouseReleaseEvent(self, event):self.click_pos = Noneif __name__ == '__main__':app = QApplication(sys.argv)login_page = chatPage('545247018', '738053369')login_page.show()sys.exit(app.exec_())
最终效果
QQ录屏20240702164601