0
I would like to get or build an example according to what I leave in the following image:
This one will need to use websockets.
I tried to study the matter of websockets and run some examples only that I am not in any luck.
A few days ago I found several examples with websockets, but all directed to a chat application.
I then tried to check if any of these chats ran, but none of them run so I couldn’t try to modify a chat example to get what I need.
Does anyone know if there is already any example done of what I need or can indicate me the best way to build it?
I’m using eclipse Mars with Tomcat 8
FOLDER CODE: 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();
}
}
}
}
HTML DIRECTORY CODE: 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>
CSS FOLDER CODE: 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;
}
here the image opens without problems, it is important to see the image to know what I want. the code I have already made are chat examples I tried to complete a chat through a tutorial but I did not succeed. how can I incorporate the image on this site and how post post my unsuccessful chat attempt?
– user3903094
What I want is more basic than a chat. there are examples of chat on the Internet but I can’t run through their examples, I don’t know if this is related to the version of tombcat they used at the time. so I have been trying to chat for myself but when I get to the stage of sending a message from a web screen to another web screen the message does not circulate (only the user who sent it can view it) another problem is the fact that the written message appears reversed on the screen, example if write "abc" appears "cba" I will try to enter this code here.
– user3903094
I put my chat example that I’ve been trying to complete to edit this example and turn it into a notification window. I couldn’t properly incorporate my code into this platform.
– user3903094
Try to gather information from the comments on the question to make it more complete.
– Sergio