QT动画制作（二十二）

alltolove

效果：

我为了省事把服务器端跟客户端合一起了，如果要用还是得把他们分开，注意一定要先开启服务器端后开客户端才行，不然没有响应。
main.qml文件：

1. import QtQuick 2.5
   
2. import QtQuick.Window 2.2
   
3. 
   
4. Window {
   
5.     visible: true
   
6.     width: 640
   
7.     height: 480
   
8.     title: qsTr("服务器端")
   
9. 
   
10.     MainForm {
    
11. }
    
12. }
    

复制代码

MainForm.ui.qml文件：

1. import QtQuick 2.5
   
2. Rect{}
   

复制代码

Rect.qml文件：

1. import QtQuick 2.0
   
2. import QtWebSockets 1.0
   
3. import QtQuick.Controls 1.0
   
4.   Rectangle {
   
5.       width: 360
   
6.       height: 360
   
7. 
   
8.       function appendMessage(message) {
   
9.           messageBox.text += "\n" + message
   
10.       }
    
11.       WebSocketServer {
    
12.           id: server
    
13.           listen: true
    
14.           port:8080
    
15.           onClientConnected: {
    
16.               webSocket.onTextMessageReceived.connect(function(message) {//用传参接收信息
    
17.                   appendMessage(qsTr("Server received message: %1").arg(message));//传过来的信息
    
18.               });
    
19.           }
    
20.           onErrorStringChanged: {
    
21.               appendMessage(qsTr("Server error: %1").arg(errorString));
    
22.           }
    
23.       }
    
24.       WebSocket {
    
25.                id: socket
    
26.                url: "ws://127.0.0.1:8080"
    
27.                onTextMessageReceived: appendMessage(qsTr("Client received message: %1").arg(message))
    
28.                onStatusChanged: {
    
29.                    if (socket.status == WebSocket.Error) {
    
30.                        appendMessage(qsTr("Client error: %1").arg(socket.errorString));
    
31.                    } else if (socket.status == WebSocket.Closed) {
    
32.                        appendMessage(qsTr("Client socket closed."));
    
33.                    }else if (socket.status == WebSocket.Open) {
    
34.                        socket.sendTextMessage("Hello World");//如果接通就向接通方发送helloworld
    
35.                    }
    
36.                }
    
37.                active: true
    
38.            }
    
39.       Text{
    
40.           id:messageBox
    
41.           anchors.centerIn: parent
    
42.           width:50
    
43.           height: 50
    
44.       }
    
45.       Column{
    
46.           spacing: 2
    
47.       Rectangle{
    
48.           width:80
    
49.           height:80
    
50.           border.width: 1
    
51.           border.color: "green"
    
52.       TextInput{
    
53.         id:input
    
54.         width:70
    
55.         height: 50
    
56.         focus:true
    
57.       }
    
58.       }
    
59.       Button{
    
60.           id:send
    
61.           text:"发送"
    
62.           onClicked: socket.sendTextMessage(input.text)//点击后把文本输入框里的内容发出去
    
63.       }
    
64.       }
    
65.   }
    

复制代码

Preview: 明天用Timer属性做一个数字时钟，还有一个小日历

不二如是

传说中的奥卡姆剃刀原理 Occam's Razor - 如无必要，勿增实体！

朝闻夕死

都是大神啊！看来我也要掌握两门语言。
顺带请求@alltolove 赞助5鱼C