【问题标题】：Websocket Connection Handshake Timed outWebsocket 连接握手超时
【发布时间】：2016-03-23 09:24:06
【问题描述】：

public static WebSocket<JsonNode> chat(final String chatname, final String username) {
    Logger.info("Received request for WebSocket");
    return new WebSocket<JsonNode>() {
        public void onReady(WebSocket.In<JsonNode> in, final WebSocket.Out<JsonNode> out){
            ......
            //My Code never reaches here
        }
}

我看到日志条目“已收到 Websocket 请求”，然后它从未点击 onReady。

播放版本 2.3.10 和 Scala 版本 2.11.6。

直观的Javascript代码

var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket
var chatSocket = new WS("@routes.Application.chat(chatname, username).webSocketURL(request)")

有人能指出我正确的方向吗？有一些版本不匹配问题导致异常和 JVM 提前退出，我能够清除所有这些问题，但是这个没有给出任何线索。

Chrome 控制台显示错误“握手超时”

在 scala 编译后编辑 :: Javascript

$(function() {

$("#onChat").show()

var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket
var chatSocket = new WS("ws://localhost:9000/room/chat?chatname=topic&amp;username=test")

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

var receiveEvent = function(event) {
    var data = JSON.parse(event.data)

    // Create the message element
    var el = $('<div class="message"><span></span><p></p></div>')
    $("span", el).text(data.user)
    $("p", el).text(data.message)
    $(el).addClass(data.kind)
    $('#messages').append(el)
}

var handleReturnKey = function(e) {
    if(e.charCode == 13 || e.keyCode == 13) {
        e.preventDefault();
        waitForSocketConnection(chatSocket,sendMessage);
    }
}

$("#talk").keypress(handleReturnKey)

chatSocket.onmessage = waitForSocketConnection(chatSocket,receiveEvent);

// Make the function wait until the connection is made...
function waitForSocketConnection(socket, callback) {
    setTimeout(function () {
        if (socket.readyState === 1) {
            console.log("Connection is made")
            if(callback != null) {
                callback();
            }
            return;
        } else {
            console.log("wait for connection...")
            waitForSocketConnection(socket, callback);
        }

    }, 1000); // wait 5 milisecond for the connection...
}

})

路线

GET     /                                controllers.Application.index()
GET     /room                          controllers.Application.chatRoom(chatname: String ?= null, username: String ?= null)
GET     /room/chat                       controllers.Application.chat(chatname, username)
GET     /assets/javascripts/chatroom.js  controllers.Application.chatRoomJs(chatname, username)

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

【问题讨论】：

我需要更多信息，编译 scala 模板后你的最终 java 脚本是什么？这里有一些指导：这里我们使用了@routes.Application.chat(chatname, username).webSocketURL()，没有请求参数，但它是为了玩2.2.6。此外，检查 https/http 和 wss/ws 的兼容性。你是在apache还是nginx下？如果是，您需要将其配置为接受 WS 协议。希望它有所帮助.. :)
试试这个来验证你的后端：websocket.org/echo.html
@nipo - 用最终的 Javascript 编辑了我的问题
我在 WS 中添加了 [chat, superchat] 协议，但没有帮助... link Accept-Encoding:gzip, deflate, sdch Accept-Language:en-US,en;q=0.8 Cache-Control:no-cache Connection:Upgrade Host:localhost:9000 Origin:http://localhost:9000 Pragma:no-cache Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits Sec-WebSocket-Key:Nf5L84QTL3GbFc452rIOCA== Sec-WebSocket-Protocol:chat, superchat Sec-WebSocket-Version:13 Upgrade:websocket User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87...
您是否尝试过使用websocket.org/echo 进行连接？这只是为了验证您的后端，之后您可以尝试按照我现在发布的答案中的模式进行操作。

标签： java scala websocket playframework-2.3

【解决方案1】：

后端

控制器 - Java 8

import play.mvc.WebSocket;

public static WebSocket<String> socket() {
    return WebSocket.withActor(MyWebSocketActor::props);
}

控制器 - Java 7

public static WebSocket<String> socket() {
    return WebSocket.withActor(new Function<ActorRef, Props>() {
        public Props apply(ActorRef out) throws Throwable {
            return MyWebSocketActor.props(out);
        }
    });
}

演员 - 处理者

import akka.actor.*;

public class MyWebSocketActor extends UntypedActor {

    public static Props props(ActorRef out) {
        return Props.create(MyWebSocketActor.class, out);
    }

    private final ActorRef out;

    public MyWebSocketActor(ActorRef out) {
        this.out = out;
    }

    public void onReceive(Object message) throws Exception {
        if (message instanceof String) {
            out.tell("I received your message: " + message, self());
        }
    }
}

来源：link

前端

jQuery：https://github.com/ffdead/jquery-graceful-websocket

Javascript：这就是我们在这里使用的模式：

<!DOCTYPE html>
  <meta charset="utf-8" />
  <title>WebSocket Test</title>
  <script language="javascript" type="text/javascript">

  var wsUri = "ws://YOUR_URL"; // it should be wss:// for https connections
  var output;

  function init()
  {
    output = document.getElementById("output");
    testWebSocket();
  }

  function testWebSocket()
  {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { onMessage(evt) };
    websocket.onerror = function(evt) { onError(evt) };
  }

  function onOpen(evt)
  {
    writeToScreen("CONNECTED");
    doSend("WebSocket rocks");
  }

  function onClose(evt)
  {
    writeToScreen("DISCONNECTED");
  }

  function onMessage(evt)
  {
    writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
    websocket.close();
  }

  function onError(evt)
  {
    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
  }

  function doSend(message)
  {
    writeToScreen("SENT: " + message);
    websocket.send(message);
  }

  function writeToScreen(message)
  {
    var pre = document.createElement("p");
    pre.style.wordWrap = "break-word";
    pre.innerHTML = message;
    output.appendChild(pre);
  }

  window.addEventListener("load", init, false);

  </script>

  <h2>WebSocket Test</h2>

  <div id="output"></div>

【讨论】：