이 페이지에서

Qt WebChannel ChatClient QML 애플리케이션

QWebChannel 서버와 WebSocket을 통해 통신하는 QML 클라이언트입니다.

'Hello World' 창 앞에 로그인 버튼이 있는 작은 로그인 창

ChatClient QML은 JavaScript와 QML을 사용하여 구현된 간단한 QWebChannel 클라이언트를 제공합니다.

QML에서 웹 채널 클라이언트 구현하기

이 예제는 신호 연결(newMessage), 슬롯 호출(sendMessage), 속성 변경 처리(userList)와 같이 QWebChannel 의 클라이언트 JavaScript 구현에서 기본 요소를 사용하는 방법을 보여줍니다.

클라이언트는 localhost의 12345번 포트에서 채팅 서버와의 WebSocket 연결을 초기화합니다. WebSocket이 열리면, WebSocket을 첫 번째 인자로, 콜백 함수를 두 번째 인자로 받아 WebChannel 객체가 생성됩니다. 콜백이 호출되면 클라이언트는 채팅 클라이언트를 구현하는 데 필요한 모든 시그널, 슬롯 및 속성을 포함하는 chatserver 라는 객체를 수신합니다. 콜백 함수는 chatserver 객체의 userListChanged, newMessage 및 keepAlive 을 해당 시그널을 처리하는 별도의 함수와 연결한 다음, loginWindow 의 show 를 호출합니다.

id가 loginWindow 인 Window 는 로그인 절차를 처리합니다. 여기에는 LoginForm.ui.qml에 정의된 LoginForm 가 포함되어 있습니다. 버튼을 누르면, 로그인 이름과 콜백 함수를 인수로 전달하여 chatserver 객체의 login 함수를 호출합니다. 이 콜백 함수는 로그인이 성공하거나 실패하는 경우 모두를 처리합니다.

로그인 후, 클라이언트는 MainForm.ui.qml에 정의된 MainForm 객체(id: mainUi )를 사용하여 sendMessage 슬롯을 통해 메시지를 게시하고, newMessage 신호를 통해 메시지를 읽으며, userList 속성을 통해 연결된 모든 사용자의 이름을 확인합니다. 또한, 클라이언트는 서버가 연결이 끊긴 클라이언트를 감지하여 userList 속성에서 제거할 수 있도록 서버의 keepAlive 신호에 응답합니다.

이 클라이언트는 Qt WebChannel 의 ChatServer 예제와 연동하여 작동할 수 있습니다.

예제 프로젝트 @ code.qt.io

관련 항목: Qt WebChannel ChatServer 예제 및 Qt WebChannel ChatClient HTML 예제.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.