先看效果图:
核心代码:
1 class msgWebObj:public QObject{ 2 Q_OBJECT 3 Q_PROPERTY(QString msgLHtmlTmpl MEMBER m_msgLeftTmpl NOTIFY signalMsgHtml)//动态属性,网络通道注册对象会使用到 4 Q_PROPERTY(QString msgRHtmlTmpl MEMBER m_msgRightTmpl NOTIFY signalMsgHtml) 5 ......
1 msgWebView::msgWebView(QWidget*parent):QWebEngineView(parent),m_channel(new QWebChannel(this)) 2 { 3 msgWebObj*obj1=new msgWebObj(this); 4 msgWebObj*obj2=new msgWebObj(this); 5 m_channel->registerObject("external0",obj1);//网络通道注册对象 6 m_channel->registerObject("external_10001",obj2); 7 page()->setWebChannel(m_channel); 8 load(QUrl("qrc:/src/msgTmpl.html"));//初始化网页信息 9 }
1 void msgWebView::appendMsg(QString msg, QString obj) 2 { 3 QJsonObject jsonObj; 4 jsonObj.insert("MSG",msg);//以键值对的方式插入数据,(MSG:msg) 5 QString ret=QJsonDocument(jsonObj).toJson(QJsonDocument::Compact);//紧凑模式,变成一个字符串了 6 if(obj==""){ 7 page()->runJavaScript(QString("appendHtml0(%1)").arg(ret));//自己发出信息 8 }else{ 9 page()->runJavaScript(QString("recvHtml_%1(%2)").arg(obj).arg(ret));//接收别人的信息 10 } 11 }
1 Widget::Widget(QWidget *parent) 2 : QWidget(parent) 3 , ui(new Ui::Widget) 4 { 5 ui->setupUi(this); 6 setWindowFlag(Qt::FramelessWindowHint); 7 m_socket=new QTcpSocket(this); 8 m_server=new QTcpServer(this); 9 m_server->listen(QHostAddress::Any,8888);//服务端监听端口 10 connect(m_server,&QTcpServer::newConnection,this,&Widget::dealMsg);//有新的连接了,进行相应的处理 11 initControl(); 12 }
1 void Widget::initControl() 2 { 3 loadStyleStyle(); 4 connect(ui->closeBtn,&QPushButton::clicked,[this]{ 5 close(); 6 }); 7 connect(ui->sendBtn,&QPushButton::clicked,[this]{ 8 ui->textBrowser->appendMsg(ui->textEdit->document()->toPlainText());//自己发信息,把数据追加到网页右侧 9 m_socket->write(ui->textEdit->document()->toPlainText().toUtf8());//写入数据 10 //m_socket->flush();//清空输入缓冲区 11 ui->textEdit->clear(); 12 }); 13 }
1 void Widget::dealMsg() 2 { 3 ui->tipLabel->setText(QString::fromLocal8Bit("有客户端接入")); 4 m_socket=m_server->nextPendingConnection();//往socket里添加新的连接 5 connect(m_socket,&QTcpSocket::disconnected,m_socket,&QTcpSocket::deleteLater); 6 connect(m_socket,&QTcpSocket::readyRead,[this]{ 7 QByteArray ret=m_socket->readAll(); 8 ui->textBrowser->appendMsg(ret,"10001");//接收信息,把数据追加到网页左侧 9 ui->tipLabel->clear(); 10 }); 11 }
以下是js核心代码
1 var external0 = null; 2 var external_10001 = null; 3 4 String.prototype.format = function() { 5 if(arguments.length == 0) return this; 6 var obj = arguments[0]; 7 var s = this; 8 for(var key in obj) { 9 s = s.replace(new RegExp("{{" + key + "}}", "g"), obj[key]); 10 } 11 return s; 12 // 传过来的是个键值对 13 // (MSG: "hello") 14 // 可以把{{MSG}}直接替换为"hello" 15 } 16 17 new QWebChannel(qt.webChannelTransport, 18 function (channel) { 19 // 使用网络通道里面注册好的对象 20 external0 = channel.objects.external0; 21 external_10001 = channel.objects.external_10001; 22 } 23 ); 24 25 function appendHtml0(msg){ 26 $("#placeholder").append(external0.msgRHtmlTmpl.format(msg)); 27 window.scrollTo(0,document.body.scrollHeight); ; 28 }; 29 30 function recvHtml_10001(msg){ 31 $("#placeholder").append(external_10001.msgLHtmlTmpl.format(msg)); 32 window.scrollTo(0,document.body.scrollHeight); ; 33 };
以上是服务端的核心代码,客户端的稍有不同,有问题可以评论留言,附上源码码云链接: https://gitee.com/waterkiller/qtcp-simple-chat-room.git