QTcpSocket+QTcpServer+QWebEngineView打造简易聊天室

先看效果图:

核心代码:

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