设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › 综合交流区 › Qt交流 › socket网络通信--QT动画制作（二十一）
返回列表 发新帖
查看: 2799|回复: 0

[技术原创] socket网络通信--QT动画制作（二十一）

[复制链接]
alltolove
发表于 2017-3-12 12:09:19 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 alltolove 于 2017-3-12 12:21 编辑

效果： 打开两个程序，点击一个程序后另外一个产生响应信息

我们首先要新建两个完全独立的QT项目
第一个项目代码：
main.qml文件：
  1. import QtQuick 2.5
  2. import QtQuick.Window 2.2

  4. Window {
  5.     visible: true
  6.     width: 640
  7.     height: 480
  8.     title: qsTr("Hello World")

  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

  4.   Rectangle {
  5.       width: 360
  6.       height: 360

  8.       WebSocket {
  9.           id: socket
  10.           url: "ws://127.0.0.1:8080"//这是本地的地址
  11.           onStatusChanged: if (socket.status == WebSocket.Error) {
  12.                                console.log("Error: " + socket.errorString)
  13.                            } else if (socket.status == WebSocket.Open) {
  14.                                socket.sendTextMessage("Hello World")//如果接通就向接通方发送helloworld
  15.                            } else if (socket.status == WebSocket.Closed) {
  16.                                messageBox.text += "\nSocket closed"
  17.                            }
  18.           active: false
  19.       }

  21.       Text {
  22.           id: messageBox
  23.           text: socket.status == WebSocket.Open ? qsTr("Sending...") : qsTr("Welcome!")
  24.           anchors.centerIn: parent
  25.       }

  27.       MouseArea {
  28.           anchors.fill: parent
  29.           onClicked: {
  30.               socket.active = !socket.active//点一下开启，再点一下关闭

  32.           }
  33.       }
  34.   }
复制代码

第二个项目代码：
前两个文件跟第一个项目的一样
Rect.qml文件：
  1. import QtQuick 2.0
  2.   import QtWebSockets 1.0

  4.   Rectangle {
  5.       width: 360
  6.       height: 360

  8.       function appendMessage(message) {
  9.           messageBox.text += "\n" + message
  10.       }

  12.       WebSocketServer {
  13.           id: server
  14.           port:8080
  15.           listen: true
  16.           onClientConnected: {
  17.               webSocket.onTextMessageReceived.connect(function(message) {//用信号传过来的参数接收信息
  18.                   appendMessage(qsTr("Server received message: %1").arg(message));//传过来的信息
  19.               });
  20.           }
  21.           onErrorStringChanged: {
  22.               appendMessage(qsTr("Server error: %1").arg(errorString));
  23.           }
  24.       }


  27.       Text {
  28.           id: messageBox
  29.       }
  30.   }
复制代码

这个还可以跟网页通信，先打开服务器端，然后打开网页，服务器端就会产生响应，网页的html代码如下：
  1. <!DOCTYPE html>
  2.   <meta charset="utf-8" />
  3.   <title>WebSocket Test</title>
  4.   <script language="javascript" type="text/javascript">

  6.   var wsUri = "ws://127.0.0.1:8080";
  7.   var output;

  9.   function init()
  10.   {
  11.     output = document.getElementById("output");
  12.     testWebSocket();
  13.   }

  15.   function testWebSocket()
  16.   {
  17.     websocket = new WebSocket(wsUri);
  18.     websocket.onopen = function(evt) { onOpen(evt) };
  19.     websocket.onclose = function(evt) { onClose(evt) };
  20.     websocket.onmessage = function(evt) { onMessage(evt) };
  21.     websocket.onerror = function(evt) { onError(evt) };
  22.   }

  24.   function onOpen(evt)
  25.   {
  26.     writeToScreen("CONNECTED");
  27.     doSend("WebSocket rocks");
  28.   }

  30.   function onClose(evt)
  31.   {
  32.     writeToScreen("DISCONNECTED");
  33.   }

  35.   function onMessage(evt)
  36.   {
  37.     writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
  38.     websocket.close();
  39.   }

  41.   function onError(evt)
  42.   {
  43.     writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
  44.   }

  46.   function doSend(message)
  47.   {
  48.     writeToScreen("SENT: " + message);
  49.     websocket.send(message);
  50.   }

  52.   function writeToScreen(message)
  53.   {
  54.     var pre = document.createElement("p");
  55.     pre.style.wordWrap = "break-word";
  56.     pre.innerHTML = message;
  57.     output.appendChild(pre);
  58.   }

  60.   window.addEventListener("load", init, false);

  62.   </script>

  64.   <h2>WebSocket Test</h2>

  66.   <div id="output"></div>
复制代码

Preview: 明天我们实现一个简单的单工通信软件

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
不二如是 + 5 + 5 + 3 太简洁了。。。

查看全部评分

本帖被以下淘专辑推荐:

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-4 05:06

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表