在Chrome中播放框架2.1 websockets

我似乎无法让websocket通信在Play框架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.");
        }
    };
}

In Routes FileGET/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>

问题在

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

必须指定协议和完整的url格式:ws://localhost:9000/greeter.

检查这个问题做它在javascript:如何构建一个WebSocket URI相对于页面的URI?

你可以使用Route的webSocketURL()方法来获取一个url，这个url可以传递给WebSocket的构造函数。以下是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);
// ....

相关内容

最新更新

热门标签：