Dart 如何编写一个简单的 web-socket echo 应用程序

Posted

技术标签:

【中文标题】Dart 如何编写一个简单的 web-socket echo 应用程序【英文标题】：Dart How to code a simple web-socket echo app 【发布时间】：2014-04-20 11:39:54 【问题描述】：

我一直在尝试学习足够的 html、css 和 Dart 来创建我的第一个网页，并且一切顺利，除了我不明白如何创建一个简单的页面和一个服务器端的 web-socket 服务器，它只会回显它。我发现的示例倾向于说明其他 Dart 工具，或者连接到 web 上的 echo 服务器，或者执行其他使他们的代码对新手来说不简单的事情。

我尝试将 Seth Ladd 的 example "dart-example-web-sockets-client" 简化为“最佳”示例。我可以接收从页面发送的内容，重新打包并认为我将其发送回去，但网页上绝对没有任何反应。我通过单击从 Dart 编辑器内部运行 Web 服务器时返回的 URL 来启动页面。由于页面不是，AFAIK，在调试器中运行我在诊断错误时受到了阻碍。

这是来自赛斯服务器的简化代码：

void handleEchoWebSocket(WebSocket webSocket) 
log.info('New WebSocket connection');

// Listen for incoming data. We expect the data to be a JSON-encoded String.
webSocket
  .map((string) => JSON.decode(string))
  .listen((json) 
    // The JSON object should contain a 'request' entry.
     var request = json['request'];
     switch (request) 
       case 'search':  
         var input = json['input'];
         log.info("Received request '$request' for '$input'");
         var response = 
           'response': request,
           'input': input,
      ;
      webSocket.add(JSON.encode(response)); // can't detect page receiving this.
      log.info("Echoed request..$request $input"); // correct data
      break;

    default:
      log.warning("Invalid request: '$request'");
      
    , onError: (error) 
  log.warning('Bad WebSocket request');
  );

此示例将用户输入用作两个搜索引擎的输入，打包结果并将其返回到页面以进行显示，从而动态创建新的 DOM 元素。

我只需要指出一个简单的例子，它会回应提交的内容。

【问题讨论】：

【参考方案1】：

这是一个简单的 websocket 客户端/服务器回显示例。消息不会显示在浏览器窗口中，但会打印在控制台窗口中。您必须分别启动 server.dart 和 main.dart。两个进程都将消息打印到它们自己的控制台窗口。 编辑：我添加了一个输出 div，用于在浏览器中显示消息。

bin\ws_server.dart:

import "dart:convert";
import 'dart:io';
import 'package:route/server.dart' show Router;



void handleWebSocket(WebSocket webSocket) 
  // Listen for incoming data. We expect the data to be a JSON-encoded String.
  webSocket
    .map((string)=> JSON.decode(string))
    .listen((json) 
      // The JSON object should contains a 'echo' entry.
      var echo = json['echo'];
      print("Message to be echoed: $echo");
      var response='"response": "$echo"';
      webSocket.add(response);
    , onError: (error) 
      print('Bad WebSocket request');
    );



void main() 
  int port = 9223;

  HttpServer.bind(InternetAddress.LOOPBACK_IP_V4, port).then((server) 
    print("Search server is running on "
             "'http://$server.address.address:$port/'");
    var router = new Router(server);
    // The client will connect using a WebSocket. Upgrade requests to '/ws' and
    // forward them to 'handleWebSocket'.
    router.serve('/ws')
      .transform(new WebSocketTransformer())
      .listen(handleWebSocket);
  );

网页\index.html：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Websocket echo</title>
  </head>
  <body>
    <p>Websocket test</p>
    <div id="output"></div>

    <script type="application/dart" src="main.dart"></script>
  </body>
</html>

web\main.dart:

library main;

import 'dart:async';
import 'dart:convert';
import 'dart:html';

class WebsocketService 

  WebSocket webSocket;

  WebsocketService() 
    connect();
  

  void connect() 
    webSocket = new WebSocket('ws://127.0.0.1:9223/ws');
    webSocket.onOpen.first.then((_) 
      onConnected();
      sendws("Hello websocket server");
      webSocket.onClose.first.then((_) 
        print("Connection disconnected to $webSocket.url");
        onDisconnected();
      );
    );
    webSocket.onError.first.then((_) 
      print("Failed to connect to $webSocket.url. "
            "Please run bin/server.dart and try again.");
      onDisconnected();
    );
  

  void onConnected() 
    webSocket.onMessage.listen((e) 
      onMessage(e.data);
    );
  

  void onDisconnected() 
    print("Disconnected, trying again in 3s");
    new Timer(new Duration(seconds:3), ()
      connect();
    );
  

  void onMessage(data) 
    var json = JSON.decode(data);
    var echoFromServer = json['response'];
    print("Received message: $echoFromServer");
    var output=querySelector('#output');
    output.text="Received message: $echoFromServer";

    new Timer(new Duration(seconds:3), () //Send a new message to server after 3s
      String now = new DateTime.now().toString();
      sendws("Time: $now");
    );

  

  void sendws(String msg)
    var request = '"echo": "$msg"';
    print("Send message to server: $request");
    webSocket.send(request);
  


void main() 
  WebsocketService ws=new WebsocketService();

【讨论】：

我认为这正是我所需要的。偶然你使用了'library main;'这促使这个新手重新阅读“飞镖图书馆之旅”并挑选一些我第一次忽略的细节。 @natelockwood 很高兴我能帮上忙，当您提出问题时，我正在摆弄 websockets。 这个答案现在已经过时了，因为 Dart 包 'route' 已停产。这个堆栈溢出答案有一个更好的 websocket 服务器实现：***.com/a/52591092/76295 如果你只是想测试服务器，你可以在这个页面上使用 browser-bsed websocket 客户端websocket.org/echo.html

以上是关于Dart 如何编写一个简单的 web-socket echo 应用程序的主要内容，如果未能解决你的问题，请参考以下文章

如何编写解析此 JSON 的 Dart 模型类？

如何使用多个发送（请求）实现 HTML5 WEB-Socket

django Web-Sockets 设计和内存数据存储

Dart // Flutter - 如何连接图像和音频以渲染静态视频

如何从 Dart VM / Dart 集成测试访问 Firebase Firestore？

如何将参数从 Dart 传递到用 Typescript 编写的 Cloud 函数，它还给了我错误代码 UNAUTHENTICATED