我的问题：

Question

目标：开发WebSocket + AngularJS客户端

我的目标是使用AngularJS创建一个WebSocket客户端，该程序应该向java服务器发送一条消息，该服务器回复相同的消息和日期。

服务器端工作正常（如下所示，（使用java实现）
我使用常规的javascript网络套接字程序对其进行了测试）

我的问题：

AngularJS的客户端无法正常工作。

也许我在这个项目中使用了错误的库。

这是我用于AngularJS的WebSocket库：

https://github.com/AngularClass/angular-websocket

客户端 - 这不起作用 - 我做错了什么？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-websocket.js"></script>
<script type="text/javascript">
var app = angular.module('websocket',[]);
app.service('WebSocketWrapper', ['$log', '$websocket', '$rootScope', function($log, $websocket, $rootScope){
this.ws = null; // Attach ws to service object
this.state = 'initializing';
this.message = 'websocket initializing';
var self = this;
this.init = function(){
    if(!this.ws){
        this.ws = $websocket('ws://127.0.0.1:8080/WebSocketHome/echo', null, {reconnectIfNorNormalClose: true});

        this.ws.onClose(function(){
            console.info('close');
            $rootScope.$apply(function(){
                self.state = 'disconnected';
                self.message = 'Websocket disconnected';
            });
        });

        this.ws.onOpen(function(){
            console.info('connected');
            $rootScope.$apply(function(){
                self.state = 'connected';
                self.message = 'websocket connected';
            });
        });

        this.ws.onMessage(function(message){
            console.log("RECEIVED : " + message);
        });
    }
};

}]）;

app.controller('WebSocketStateCtrl', ['$scope', 'WebSocketWrapper', function($scope, WebSocketWrapper){
    $scope.websocket = WebSocketWrapper;
    $scope.websocket.init();
    $scope.sendMsg = function sendMsg() {
        var message = textId.value;
        display("Message send : " + message);
        websocket.send(message);
        //ws.send(message);
    }
    $scope.display = function display(message) {
        var ligne = document.createElement("p");
        ligne.innerHTML = message;
        messageDiv.appendChild(ligne);
    }
}]);



</script>
</head>
<body>

<div id="messageDivId"></div>
    <a href="">ClickMe</a>

<!-- this div displays the status of the websocket connection -->
<div data-ng-controller="WebSocketStateCtrl">
   <span data-ng-bind="websocket.message"></span>
   <span class="circle" data-ng-class="{initializing: websocket.state === 'initializing', 
         connected : websocket.state === 'connected', 
         disconnected: websocket.state === 'disconnected',
         reconnecting: websocket.state === 'reconnecting'}">
   </span>

   <div style="text-align: center;">
    <form action="">
        <input id="textId" name="message" value="" type="text">&nbsp;
        <button ng-click="sendMsg()">SEND</button>
    </form>
   </div>
</div>

</body>
</html>

服务器端 - 这很好用：

package org.example.websocket;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.OnMessage;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/echo")
public class DeviceWebSocketServer {

    @OnMessage
    public String echo(String message){
        System.out.println("Message reÃ§u : " + message);
        return ThreadSafeFormatter.getDateFormatter().format(new Date()) + " " + message;
    }
}

class ThreadSafeFormatter {
    private static final ThreadLocal<SimpleDateFormat> formatter = new ThreadLocal<SimpleDateFormat>(){
        @Override
        protected SimpleDateFormat initialValue(){
            return new SimpleDateFormat("dd-MM-yyyy HH:mm:ss");
        }
    };

    public static DateFormat getDateFormatter(){
        return formatter.get();
    }
}

HTML页码

常规javascript中的html页面显示服务器端工作正常：

<!DOCTYPE html>
<html>
<head>
<title>Test WebSockets</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script language="javascript" type="text/javascript">
    var wsUri = getRootUri() + "/WebSocketHome/echo";
    function getRootUri() {
        return "ws://"
                + (document.location.hostname == "" ? "localhost" : document.location.hostname)
                + ":"
                + (document.location.port == "" ? "8080" : document.location.port);
    }
    function init() {
        messageDiv = document.getElementById("messageDivId");
        websocket = new WebSocket(wsUri);
        websocket.onopen = function(evt) {
            onOpen(evt)
        };
        websocket.onmessage = function(evt) {
            onMessage(evt)
        };
        websocket.onerror = function(evt) {
            onError(evt)
        };
    }
    function onOpen(evt) {
        afficher("CONNECTE");
    }
    function onMessage(evt) {
        afficher("RECU : " + evt.data);
    }
    function onError(evt) {
        afficher('<span style="color: red;">ERREUR:</span> ' + evt.data);
    }
    function envoyer() {
        var message = textId.value;
        afficher("ENVOYE : " + message);
        websocket.send(message);
    }
    function afficher(message) {
        var ligne = document.createElement("p");
        ligne.innerHTML = message;
        messageDiv.appendChild(ligne);
    }
    window.addEventListener("load", init, false);
</script>
</head>
<body>
    <h2 style="text-align: center;">Client WebSocket Echo</h2>
    <div style="text-align: center;">
        <form action="">
            <input id="textId" name="message" value="" type="text">&nbsp;
            <input onclick="envoyer()" value="Envoyer" type="button">
        </form>
    </div>
    <div id="messageDivId"></div>
    <a href="http://localhost:8080/WebSocketHome/test.html">ClickMe</a>
</body>
</html>

WebSocket + AngularJS客户端

目标：开发WebSocket + AngularJS客户端

我的问题：

客户端 - 这不起作用 - 我做错了什么？

服务器端 - 这很好用：

HTML页码

0 个答案: