websocket - 在 Elm 中使用 WebSockets 时出现 "input is undefined"错误

Question

我试图在 Elm 中使用 WebSockets 设置一个简单的示例，但我不断收到运行时错误“输入未定义”。控制台在我的 elm 文件中没有给我任何行号或类似的东西。

我试图在一个大型项目中使用 WebSockets，但我一直收到“a is undefined”错误，所以我决定制作这个小示例来尝试找出问题。

我写了一些代码来接收包含来自 websocket 的数字的消息。它递增数字，然后通过网络套接字将新数字发回。服务器做同样的事情，将递增 1 的数字发送回客户端。

这是榆树代码:

import Graphics.Element (Element)
import Signal
import Signal (Signal)
import Text
import Window
import WebSocket
import String

type State = Num Int
           | StateErr String

input : Signal String
input =
    WebSocket.connect "ws://localhost:4567/test" sendToServer

sendToServer : Signal String
sendToServer =
    Signal.dropRepeats
        (Signal.dropIf (\str -> str == "") "" (Signal.map formatReply state))

formatReply : State -> String
formatReply state =
    case state of
        Num n -> toString n
        StateErr str -> ""


stepState : String -> State -> State
stepState str state =
    case (String.toInt str) of
        Ok n -> Num (n + 1)
        Err str -> StateErr str


display : (Int,Int) -> State -> Element
display (w,h) state = Text.asText state


state : Signal State
state =
    Signal.foldp stepState (Num 0) input


main : Signal Element
main =
    Signal.map2 display Window.dimensions state

我测试了服务器端，它工作正常，所以我绝对不认为是服务器导致了问题。

当我在 Firefox 中尝试代码时，我得到“输入未定义”。当我在 Chrome 中运行它时，出现“无法读取未定义的属性‘ child ’”。在 Chrome 中，在查看堆栈跟踪时，似乎当代码开始运行时，输入未定义。这是 WebSocket 库的错误吗？

我对使用 Elm 很陌生，所以我很感激任何关于使用 websockets 的帮助/建议。

Answer 1

我了解到我遇到麻烦的原因是，截至目前，elm 中的 WebSockets 库尚未完全实现。我还了解到我可以使用端口实现我的目标，然后在 javascript 中实现 websocket。

我在我的 html 文件中添加了以下 javascript:

var game = Elm.fullscreen(Elm.SlimeWarz, {rawServerInput: ""});
var socket = new WebSocket("ws://localhost:4567");

socket.onopen = function(){
  console.log("Socket has been opened.");
}

socket.onmessage = function(msg){
  game.ports.rawServerInput.send(msg.data);
}

game.ports.sendToServer.subscribe(sendOverWebsocket);

function sendOverWebsocket(str) {
  socket.send(str);
}

然后在 elm 中，我可以使用名为 sendtoServer 的移植信号发送数据

port sendToServer : Signal String

并且我可以通过端口信号 rawServerInput 查看我接收到的所有数据

port rawServerInput : Signal String