在 Chrome 中播放 Framework 2.1 websockets答案

【问题标题】：Play Framework 2.1 websockets in Chrome在 Chrome 中播放 Framework 2.1 websockets
【发布时间】：2013-03-11 07:55:38
【问题描述】：

我似乎无法让 websocket 通信在 Play Framework 2.1 版中工作。

我创建了一个简单的测试，它只需要按一下按钮来回发送消息。它的所有代码都在下面。但是除了按钮什么都没有显示。

有没有人看到这个问题或者有人可以告诉我我在下面的代码中可能做错了什么？

我使用的是最新版本的 Chrome。

这是我的简单设置。

在 Application.java 中

public static Result index() {
    return ok(index.render());
}

public static WebSocket<String> sockHandler() {
    return new WebSocket<String>() {
        // called when the websocket is established
        public void onReady(WebSocket.In<String> in,
                WebSocket.Out<String> out) {
            // register a callback for processing instream events
            in.onMessage(new Callback<String>() {
                public void invoke(String event) {
                    System.out.println(event);
                }
            });

            // write out a greeting
            out.write("I'm contacting you regarding your recent websocket.");
        }
    };
}

在路由文件中 GET / controllers.Application.index()

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file               controllers.Assets.at(path="/public", file)
GET     /greeter                    controllers.Application.sockHandler()

在 Index.Scala.html 中

@main(null) {

<div class="greeting"></div>
<button class="send">Send</button>

<script type="text/javascript" charset="utf-8">

    $(function() {
        var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket
        var sock = new WS("@routes.Application.sockHandler()")

        sock.onmessage = function(event) {
            $('.greeting').append(event.data)
        }

        $('button.send').click(function() {
            sock.send("I'm sending a message now.")
        });            
    })

</script>

}

在 Main.scala.html

@(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
    <title>@title</title>
    <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
    <script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
</head>
<body>
    @content
</body>

【问题讨论】：

标签： javascript websocket playframework dom-events playframework-2.1

【解决方案1】：

问题出在

var sock = new WS("@routes.Application.sockHandler()")

您必须以以下格式指定协议和完整的 url：ws://localhost:9000/greeter。

检查此问题以在 javascript 中执行：How to construct a WebSocket URI relative to the page URI?

【讨论】：

【解决方案2】：

您可以使用路由的webSocketURL() 方法来检索可以传递给WebSocket 构造函数的url。以下是 Play 的 websocket-chat 示例代码中的一个示例：

$(function() {            
  var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket
  var chatSocket = new WS("@routes.Application.chat(username).webSocketURL()")

  var sendMessage = function() {
    chatSocket.send(JSON.stringify(
      {text: $("#talk").val()}
    ))
    $("#talk").val('')
  }

  // ...

所以在你的代码中你可以使用类似的东西

var sock = new WS("@routes.Application.sockHandler().webSocketURL()");

我个人不喜欢将插值代码与 JS 混合，因为我认为在客户端执行的任何代码都应该只关心客户端的状态，而不是服务器（更不用说它会重构脚本）进入外部文件是不可能的），所以我倾向于做这样的事情：

<div class="container app-container" 
     data-ws-uri="@routes.Application.WSUri.webSocketURL()">
.......
</div>

然后在我的 JS 中我可以做类似的事情

var sock = new WS(document.querySelector(".app-container").dataset.wsUri);
// ....

【讨论】：

由于某种原因 webSocketURL() 不适用于 Play 2.1。当我把它放进去时，我得到这个错误，说它找不到请求标头。在 Play 2.1 中必须有更好的方法来处理这些 url ...
跟进：在您的模板顶部，您将希望拥有@(implicit request: RequestHeader)，这将允许它为您工作。不幸的是，Play 在记录这个方面有点松懈...... 编辑：我实际上认为你必须明确地传递请求。这就是我在我的代码中所做的并且它有效。
嗯......我试过这样：'var sock = new WS("@routes.Application.sockHandler().webSocketURL(request)");'但是它给了我一个错误说找不到：值请求
我也尝试在顶部添加隐式调用，添加后，它给我的错误是“无法应用重载方法值 [webSocketURL] (play.api.mvc.RequestHeader)”
这是我正在使用的代码的链接： - 链接到控制器（参见 index 方法）：github.com/traviskaufman/JAMLive/blob/master/app/controllers/… - 链接到视图：github.com/traviskaufman/JAMLive/blob/master/app/views/… 这对我有用。我希望这会有所帮助！