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

【问题标题】：Dart How to code a simple web-socket echo appDart 如何编写一个简单的 web-socket echo 应用程序
【发布时间】：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 元素。

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

【问题讨论】：

标签： websocket dart dart-webui dart-editor

【解决方案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 服务器实现：stackoverflow.com/a/52591092/76295 如果你只是想测试服务器，你可以在这个页面上使用 browser-bsed websocket 客户端websocket.org/echo.html