Websocket Dart如何编写一个简单的web套接字echo应用程序

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

我试图将Seth Ladd的“dart示例web套接字客户端”简化为“最佳”示例。我可以接收从页面发送的内容，重新打包并认为我正在将其发送回去，但网页上绝对没有发生任何事情。我通过单击从Dart编辑器内部运行web服务器时返回的URL来启动页面。因为页面不是在调试器中运行的，所以我无法诊断错误

下面是来自Seth服务器的简化代码：

void handleEchoWebSocket（WebSocket-WebSocket）{
log.info（“新的WebSocket连接”）；
//侦听传入的数据。我们希望数据是JSON编码的字符串。
网袋
.map（（字符串）=>JSON.decode（字符串））
.listen（（json）{
//JSON对象应该包含一个“请求”条目。
var-request=json['request']；
开关（请求）{
“搜索”案例：
var-input=json['input']；
log.info（“接收到对“$input”的请求“$request”）；
var响应={
“响应”：请求，
“输入”：输入，
};
webSocket.add（JSON.encode（response））；//无法检测接收此消息的页面。
log.info（“回显请求..$request$input”）；//正确的数据
打破
违约：
log.warning（“无效请求：'$request'”）；
}
}，onError:（错误）{
log.warning（'错误的WebSocket请求'）；
});
}

本例将用户输入作为两个搜索引擎的输入，打包结果并返回到页面，以便在动态创建新的DOM元素时显示

---

我只需要指出一个简单的示例，它将回显提交的内容。

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

bin\ws\u server.dart：

导入“省道：转换”；
导入“dart:io”；
导入“package:route/server.dart”显示路由器；
空心把手承口（承口承口承口）{
//侦听传入的数据。我们希望数据是JSON编码的字符串。
网袋
.map（（字符串）=>JSON.decode（字符串））
.listen（（json）{
//JSON对象应该包含一个“echo”条目。
var-echo=json['echo']；
打印（“要回显的消息：$echo”）；
var response='{“response”：“$echo”}”；
添加（响应）；
}，onError:（错误）{
打印（“错误的WebSocket请求”）；
});
}
void main（）{
int端口=9223；
绑定（InternetAddress.LOOPBACK\u IP\u V4，端口）。然后（（服务器）{
打印（“搜索服务器正在运行”
“'http://${server.address.address}:$port/'”；
var路由器=新路由器（服务器）；
//客户端将使用WebSocket进行连接。将请求升级到“/ws”和
//将它们转发到“handleWebSocket”。
路由器服务（'/ws'）
.transform（新的WebSocketTransformer（））
.听（手持电子插座）；
});
}

web\index.html：

网袋回声
网袋试验

web\main.dart：

librarymain；
导入“dart:async”；
导入“dart:convert”；
导入“dart:html”；
类WebsocketService{
网袋网袋；
WebsocketService（）{
connect（）；
}
void connect（）{
webSocket=newWebSocket（'ws://127.0.0.1:9223/ws'）；
webSocket.onOpen.first.then（u）{
未连接（）；
sendws（“你好websocket服务器”）；
webSocket.onClose.first.then（（）{
打印（“与${webSocket.url}的连接已断开”）；
onDisconnected（）；
});
});
webSocket.onError.first.then（u）{
打印（“连接到${webSocket.url}失败。”
“请运行bin/server.dart并重试。”）；
onDisconnected（）；
});
}
连接无效（）{
webSocket.onMessage.listen（（e）{
onMessage（如数据）；
});
}
void onDisconnected（）{
打印（“断开连接，在3s内重试”）；
新计时器（新持续时间（秒：3），（）{
connect（）；
});
}
消息（数据）无效{
var json=json.decode（数据）；
var echoFromServer=json['response']；
打印（“收到的消息：$echoFromServer”）；
变量输出=查询选择器（“#输出”）；
output.text=“收到的消息：$echoFromServer”；
新计时器（新的持续时间（秒数：3），（）{//在3s后向服务器发送新消息
String now=new DateTime.now（）.toString（）；
sendws（“时间：$now”）；
});
}
void sendws（字符串消息）{
var请求=“{”echo:“$msg”}”；
打印（“向服务器发送消息：$request”）；
发送（请求）；
}
}
void main（）{
WebsocketService ws=新的WebsocketService（）；
}

我想这正是我所需要的。你无意中用了“图书馆总管”这促使这位新手重读《飞镖图书馆之旅》，并了解一些我第一次忽略的细节。@natelockwood很高兴我能帮上忙，当你提出问题时，我正在摆弄WebSocket。这个答案现在已经过时，因为飞镖包“路线”已经停止。这个堆栈溢出答案有一个更好的websocket服务器实现：如果您只想测试服务器，您可以在此页面上使用浏览器bsed websocket客户端