1

Eu gostaria de obter ou de construir um exemplo conforme o que deixo na imagem seguinte:

inserir a descrição da imagem aqui

Esse terá de utilizar websockets.

Tentei estudar a matéria de websockets e correr alguns exemplos só que não estou com sorte nenhuma.

Faz uns dias encontrei vários exemplos com websockets, mas todos direcionados para uma aplicação do tipo chat.

Eu tentei então verificar se algum desses chats corria, mas nenhum deles corre pelo que não pude tentar uma modificação de um exemplo chat para obter aquilo que preciso.

Alguém sabe se já existe algum exemplo feito daquilo que preciso ou me pode indicar a melhor forma de o construir?

Eu estou a utilizar eclipse mars com Tomcat 8

CÓDIGO DA PASTA: SRC

package ws;

import java.io.IOException;
import java.util.concurrent.atomic.AtomicInteger;
import javax.websocket.server.ServerEndpoint;
//import javax.websocket.OnOpen;
//import javax.websocket.OnClose;
//import javax.websocket.OnMessage;
//import javax.websocket.OnError;
//import javax.websocket.Session;
import javax.websocket.*;

@ServerEndpoint(value = "/ws")
public class WebSocketAnnotation {
    private static final AtomicInteger sequence = new AtomicInteger(1);
    private final String username;
    private Session session;

    public WebSocketAnnotation() {
        username = "User" + sequence.getAndIncrement();
    }

    // inciar sessao de chat
    @OnOpen
    public void start(Session session) {
        this.session = session;
        String message = "*" + username + "* connected.";
        sendMessage(message);
    }

    @OnClose
    public void end() {
        // clean up once the WebSocket connection is closed
    }

    @OnMessage
    public void receiveMessage(String message) {
        // one should never trust the client, and sensitive HTML
        // characters should be replaced with < > " &
        String reversedMessage = new StringBuffer(message).reverse().toString();
        sendMessage("[" + username + "] " + reversedMessage);
    }

    @OnError
    public void handleError(Throwable t) {
        t.printStackTrace();
    }

    private void sendMessage(String text) {
        // uses *this* object's session to call sendText()
        try {
            this.session.getBasicRemote().sendText(text);
        } catch (IOException e) {
            // clean up once the WebSocket connection is closed
            try {
                this.session.close();
            } catch (IOException e1) {
                e1.printStackTrace();
            }
        }
    }
}

CODIGO HTML DA PASTA: WEBCONTENT

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Chat</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript">

        var websocket = null;

        window.onload = function() { // URI = ws://10.16.0.165:8080/WebSocket/ws
            connect('ws://' + window.location.host + '/WebSockets/ws');
            document.getElementById("chat").focus();
        }

        function connect(host) { // connect to the host websocket
            if ('WebSocket' in window)
                websocket = new WebSocket(host);
            else if ('MozWebSocket' in window)
                websocket = new MozWebSocket(host);
            else {
                writeToHistory('Get a real browser which supports WebSocket.');
                return;
            }

            websocket.onopen    = onOpen; // set the event listeners below
            websocket.onclose   = onClose;
            websocket.onmessage = onMessage;
            websocket.onerror   = onError;
        }

        function onOpen(event) {
            writeToHistory('Connected to ' + window.location.host + '.');
            document.getElementById('chat').onkeydown = function(key) {
                if (key.keyCode == 13)
                    doSend(); // call doSend() on enter key
            };
        }

        function onClose(event) {
            writeToHistory('WebSocket closed.');
            document.getElementById('chat').onkeydown = null;
        }

        function onMessage(message) { // print the received message
            writeToHistory(message.data);
        }

        function onError(event) {
            writeToHistory('WebSocket error (' + event.data + ').');
            document.getElementById('chat').onkeydown = null;
        }

        function doSend() {
            var message = document.getElementById('chat').value;
            if (message != '')
                websocket.send(message); // send the message
            document.getElementById('chat').value = '';
        }

        function writeToHistory(text) {
            var history = document.getElementById('history');
            var line = document.createElement('p');
            line.style.wordWrap = 'break-word';
            line.innerHTML = text;
            history.appendChild(line);
            history.scrollTop = history.scrollHeight;
        }

    </script>
</head>

<body>
<noscript>JavaScript must be enabled for WebSockets to work.</noscript>
<div>
    <div id="container"><div id="history"></div></div>
    <p><input type="text" placeholder="type to chat" id="chat"></p>
</div>
</body>

</html>

CODIGO CSS DA PASTA: WEBCONTENT

input#chat {
  width: 456px;
  border: 1px solid #AACAAC;
}

#container {
  width: 450px;
}

#history {
  height: 180px;
  border: 1px solid #AACAAC;
  padding: 5px;
  font-family: Courier, monospace;
  font-size: .9em;
  overflow-y: scroll;
  width: 100%;
}

#history p {
  margin: 0;
  padding: 0;
} 
4
  • aqui a imagem abre sem problemas, é importante verem a imagem para saberem o que pretendo. os código que já tenho feitos são de exemplos de chat eu tentei completar um chat através de um tutorial mas não tive sucesso. como posso incorporar a imagem neste site e como posto publicar a minha tentativa de chat mal sucedida? 17/01/2016 às 16:32
  • Aquilo que pretendo é mais básico do que um chat. existem exemplos de chat na internet mas não consigo correr os exemplos deles, não sei se isso estará relacionado com a versão de tombcat que utilizaram nessa altura. assim tenho estado a tentar fazer um chat por mim mesmo mas quando chego à etapa de enviar uma mensagem de uma tela web para outra tela web a mensagem não circula (apenas o user que a enviou a consegue visualizar) outro problema é o fato de a mensagem escrita aparecer invertida na tela, exemplo se escrever "abc" aparece "cba" eu vou tentar incorporar esse código aqui. 17/01/2016 às 16:56
  • eu coloquei o meu exemplo de chat que tenho estado a tentar completar para dai editar esse exemplo e o transformar numa janela de notificações. não consegui incorporar bem o meu código nesta plataforma. 17/01/2016 às 17:06
  • Tenta juntar informações daqui dos comentários na pergunta para ela ficar mais completa.
    – Sergio
    17/01/2016 às 20:08

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .