QUdpSocket+QWebEngineView打造简易聊天室

先看下效果图:

核心代码:

class msgWebObj:public QObject{
    Q_OBJECT
    Q_PROPERTY(QString msgLHtmlTmpl MEMBER m_msgLeftTmpl NOTIFY signalMsgHtml)//动态属性,后面网络通道注册对象会使用到
    Q_PROPERTY(QString msgRHtmlTmpl MEMBER m_msgRightTmpl NOTIFY signalMsgHtml)
    ...... 
};

msgWebView::msgWebView(QWidget*parent):QWebEngineView(parent),m_channel(new QWebChannel(this))
{
    msgWebObj*obj1=new msgWebObj(this);
    msgWebObj*obj2=new msgWebObj(this);
    m_channel->registerObject("external0",obj1);//网络通道注册对象
    m_channel->registerObject("external_10001",obj2);
    page()->setWebChannel(m_channel);
    load(QUrl("qrc:/src/msgTmpl.html"));//初始化网页信息
}

void msgWebView::appendMsg(QString msg, QString obj)
{
    QJsonObject jsonObj;
    jsonObj.insert("MSG",msg);//以键值对的方式插入值,(MSG:msg)
    QString ret=QJsonDocument(jsonObj).toJson(QJsonDocument::Compact);//紧凑模式,转成字符串
    if(obj==""){
        page()->runJavaScript(QString("appendHtml0(%1)").arg(ret));
    }else{
        page()->runJavaScript(QString("recvHtml_%1(%2)").arg(obj).arg(ret));
    }
}

 以下是js代码
 1 var external0 = null;
var external_10001 = null;

String.prototype.format = function() {  
    if(arguments.length == 0) return this;  
    var obj = arguments[0];  
    var s = this;  
    for(var key in obj) {  
        s = s.replace(new RegExp("{{" + key + "}}", "g"), obj[key]);  
    }  
    return s;
    // 传过来的是个键值对
    //     (MSG: "hello")
    // 可以把{{MSG}}直接替换为"hello"
}  

new QWebChannel(qt.webChannelTransport,
    function (channel) {
        // 使用网络通道里面注册好的对象
        external0 = channel.objects.external0;
        external_10001 = channel.objects.external_10001;
    }
);

function appendHtml0(msg){
    $("#placeholder").append(external0.msgRHtmlTmpl.format(msg));
    window.scrollTo(0,document.body.scrollHeight); ;  
};

function recvHtml_10001(msg){
    $("#placeholder").append(external_10001.msgLHtmlTmpl.format(msg));
    window.scrollTo(0,document.body.scrollHeight); ;  
};

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    setWindowFlag(Qt::FramelessWindowHint);
    m_sender=new QUdpSocket(this);
    m_sender->bind(6666,QUdpSocket::ShareAddress);//绑定端口
    connect(m_sender,&QUdpSocket::readyRead,this,&Widget::dealMsg);//对读取到的数据进行处理
    initControl();
}

void Widget::initControl()
{
    loadStyleStyle();
    connect(ui->closeBtn,&QPushButton::clicked,[this]{
        close();
    });
    connect(ui->sendBtn,&QPushButton::clicked,[this]{
        ui->textBrowser->appendMsg(ui->textEdit->document()->toPlainText());//将自己发送的数据显示到网页右侧
        m_sender->writeDatagram(ui->textEdit->document()->toPlainText().toUtf8(),QHostAddress::Broadcast,7777);//写入数据到端口7777
        ui->textEdit->clear();
    });
}

void Widget::dealMsg()
{
    QByteArray ret;
    ret.resize(m_sender->pendingDatagramSize());
    if(m_sender->hasPendingDatagrams()){
        m_sender->readDatagram(ret.data(),ret.size());//读取数据
        ui->textBrowser->appendMsg(ret,"10001");//显示到网页左侧
    }
}

......

如果不懂可以下方评论留言,附上源码码云链接: https://gitee.com/waterkiller/qudp-simple-chat-room.git