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 应用程序的主要内容,如果未能解决你的问题,请参考以下文章
如何使用多个发送(请求)实现 HTML5 WEB-Socket
Dart // Flutter - 如何连接图像和音频以渲染静态视频
如何从 Dart VM / Dart 集成测试访问 Firebase Firestore?
如何将参数从 Dart 传递到用 Typescript 编写的 Cloud 函数,它还给了我错误代码 UNAUTHENTICATED