Fatal编程技术网
  • javascript/
  • Javascript 在Chrome中播放框架2.1 WebSocket

Javascript 在Chrome中播放框架2.1 WebSocket

javascript websocket playframework

Javascript 在Chrome中播放框架2.1 WebSocket,javascript,websocket,playframework,dom-events,playframework-2.1,Javascript,Websocket,Playframework,Dom Events,Playframework 2.1,我似乎无法让websocket通信在Play Framework 2.1版中工作 我创建了一个简单的测试，只需按一下按钮就可以来回发送消息。下面是它的所有代码。但除了按钮外，什么也没有显示 有没有人看到这个问题，或者有人能告诉我下面的代码中我可能做错了什么 我正在使用最新版本的Chrome 这是我的简单设置 在Application.java中 public static Result index() { return ok(index.render()); } public stat

我似乎无法让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.");
        }
    };
}
在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>

@(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>

@main（空）{
发送
$（函数（）{
var WS=window['MozWebSocket']？MozWebSocket:WebSocket
var sock=new WS（“@routes.Application.sockHandler（）”）
sock.onmessage=函数（事件）{
$（'.greeting'）.append（event.data）
}
$（'button.send'）。单击（函数（）{
send（“我现在正在发送消息。”）
});            
})
}

在Main.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>

@(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>

@（标题：字符串）（内容：Html）
@头衔
@内容
问题出在

var sock = new WS("@routes.Application.sockHandler()")
您必须以以下格式指定协议和完整的url:ws://localhost:9000/greeter

在javascript中检查此问题：

问题在

var sock = new WS("@routes.Application.sockHandler()")
您必须以以下格式指定协议和完整的url:ws://localhost:9000/greeter

在javascript中检查此问题：

您可以使用路由的
webSocketURL（）
方法检索可以传递给WebSocket构造函数的url。下面是Play的websocket聊天示例代码中的一个示例：

$(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()");

var sock = new WS(document.querySelector(".app-container").dataset.wsUri);
// ....
就我个人而言，我不喜欢将插入代码与JS混合，因为我认为在客户端上执行的任何代码都应该只关注客户端的状态，而不是服务器的状态（更不用说它使脚本无法重构为外部文件），所以我倾向于这样做：

<div class="container app-container" 
     data-ws-uri="@routes.Application.WSUri.webSocketURL()">
.......
</div>
您可以使用路由的
webSocketURL（）
方法检索可以传递给WebSocket构造函数的url。下面是Play的websocket聊天示例代码中的一个示例：

$(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()");

var sock = new WS(document.querySelector(".app-container").dataset.wsUri);
// ....
就我个人而言，我不喜欢将插入代码与JS混合，因为我认为在客户端上执行的任何代码都应该只关注客户端的状态，而不是服务器的状态（更不用说它使脚本无法重构为外部文件），所以我倾向于这样做：

<div class="container app-container" 
     data-ws-uri="@routes.Application.WSUri.webSocketURL()">
.......
</div>
出于某些原因，webSocketURL（）不适用于Play 2.1。当我把它放进去的时候，我得到一个错误，说它找不到请求头。在Play 2.1中，必须有一种更好的方法来处理这些URL…以跟进这一点：在模板的顶部，您希望有
@（隐式请求：RequestHeader）
，这将允许它为您工作。不幸的是，Play在记录这些方面有点松懈。。。编辑：我实际上认为您必须显式地传递请求。这就是我在我的代码中所做的，它是有效的。嗯。。。我这样试过：“var sock=newws（@routes.Application.sockHandler（）.webSocketURL（request）”；”但是它给了我一个错误，说“未找到”：value requestI也尝试在顶部添加隐式调用，添加之后，它给我的错误是“重载的方法值[webSocketURL]无法应用于（play.api.mvc.RequestHeader）”，这里是我正在使用的代码的链接：-链接到控制器（请参阅
索引
方法）：-链接到视图：这对我有效。我希望这有帮助！出于某些原因，webSocketURL（）不适用于Play 2.1。当我把它放进去的时候，我得到一个错误，说它找不到请求头。在Play 2.1中，必须有一种更好的方法来处理这些URL…以跟进这一点：在模板的顶部，您希望有
@（隐式请求：RequestHeader）
，这将允许它为您工作。不幸的是，Play在记录这些方面有点松懈。。。编辑：我实际上认为您必须显式地传递请求。这就是我在我的代码中所做的，它是有效的。嗯。。。我这样试过：“var sock=newws（@routes.Application.sockHandler（）.webSocketURL（request）”；”但是它给了我一个错误，说“未找到”：value requestI也尝试在顶部添加隐式调用，添加之后，它给我的错误是“重载的方法值[webSocketURL]无法应用于（play.api.mvc.RequestHeader）”，这里是我正在使用的代码的链接：-链接到控制器（请参阅
索引
方法）：-链接到视图：这对我有效。我希望这有帮助！