Websocket - Why can't I send messages to a specific user? - javascript

Question:
Why am I being able to send messages to all users but not to a specific user? Am I missing something obvious here?
Problem:
My POC uses the following resources:
The official Spring Boot tutorial for sending messages to all users
This Baeldung tutorial for sending messages to specific users
I am currently using two endpoints:
The first one sends messages to all users and works fine.
Send to all users - working
#MessageMapping("/hello")
#SendTo("/topic/greetings")
public StompResponse greeting(StompRequest message) throws Exception {
Thread.sleep(1000); // simulated delay
return new StompResponse("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
}
The second one doesn't work. The method sendSpecific never gets called and I'm stuck trying to understand why.
Send to specific user - NOT working
/**
* Example of sending message to specific user using 'convertAndSendToUser()' and '/queue'
*/
#MessageMapping(Constants.SECURED_CHAT_ROOM)
public void sendSpecific(#Payload StompRequest message, Principal user, #Header("simpSessionId") String sessionId) throws Exception {
System.out.println("METHOD CALLED"); // This method never gets called
SimpMessageHeaderAccessor headerAccessor = SimpMessageHeaderAccessor.create(SimpMessageType.MESSAGE);
headerAccessor.setSessionId(sessionId);
headerAccessor.setLeaveMutable(true);
StompResponse out = new StompResponse(HtmlUtils.htmlEscape(message.getName()));
simpMessagingTemplate.convertAndSendToUser("hardcoded_username", Constants.SECURED_CHAT_SPECIFIC_USER, out, headerAccessor.getMessageHeaders());
}
Socket configuration:
#Configuration
#EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
#Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic", Constants.SECURED_CHAT_SPECIFIC_USER);
config.setUserDestinationPrefix("/secured/user");
config.setApplicationDestinationPrefixes("/app");
}
#Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/connection-uri").withSockJS();
registry.addEndpoint(SECURED_CHAT_ROOM).withSockJS();
}
}
Client code:
const SocketConnection = function(l) {
const listener = l;
let sessionId;
const parseSessionId = (url) => {
console.log(stompClient.ws._transport.url);
url = url.replace("ws://localhost:8080" + Uri.CONNECTION_URI + "/", "");
url = url.replace("/websocket", "");
url = url.replace(/^[0-9]+\//, "");
console.log("Your current session is: " + url);
return url;
};
this.connect = () => {
const socket = new SockJS(Uri.CONNECTION_URI);
stompClient = Stomp.over(socket);
stompClient.connect({}, (frame) => {
listener.onSocketConnect(true);
console.log('Connected: ' + frame);
stompClient.subscribe(Uri.ALL_USERS, function (greeting) {
listener.onResponseReceived(JSON.parse(greeting.body).content);
});
// WIP
const url = stompClient.ws._transport.url
sessionId = parseSessionId(url);
console.log('SUBSCRIBING FOR SPECIFIC USER: ', Uri.SECURED_CHAT_SPECIFIC_USER)
// stompClient.subscribe(Uri.SECURED_CHAT_SPECIFIC_USER + sessionId, function (msgOut) {
stompClient.subscribe(Uri.SECURED_CHAT_SPECIFIC_USER + "-user" + sessionId, function (msgOut) {
// that.messageOut(JSON.parse(msgOut.body), opts);
console.log('SINGLE USER WORKS!!!!!!!',JSON.parse(msgOut.body))
});
});
}
this.disconnect = () => {
if (stompClient !== null) {
stompClient.disconnect();
}
listener.onSocketConnect(false);
console.log("Disconnected");
}
this.sendRequest = (uri) => {
stompClient.send(uri, {}, JSON.stringify({'name': $("#name").val()}));
}
};
Client initialization:
$(function () {
const socketClient = new SocketConnection(new FormUI());
$("form").on('submit', function (e) {
e.preventDefault();
});
$( "#connect" ).click(function() { socketClient.connect(); });
$( "#disconnect" ).click(function() { socketClient.disconnect(); });
$( "#send" ).click(function() {
socketClient.sendRequest(Uri.ALL_USERS);
socketClient.sendRequest(Uri.SECURED_CHAT_ROOM);
});
});

Related

Why does JS WebSocket get stuck on CONNECTING in sparkjava?

Here is my websocket code:
#WebSocket
public class SocketServer {
BetterLogger logger = new BetterLogger(Main.logger) {{
loggerName = "socket-server";
}};
public static class ConnectionInit {
String tty;
String device;
}
static class ConnectionOpenResponse {
String tty;
}
#OnWebSocketConnect
public void onConnect(Session user) throws Exception {
Main.logger.info("Websocket connected!");
}
#OnWebSocketClose
public void onClose(Session user, int statusCode, String reason) {
Main.logger.info("Websocket disconnected!");
Main.sessions.closeSession(user);
}
#OnWebSocketMessage
public void onMessage(Session user, String message) {
Main.logger.info("Recevied websock connection: " + message);
try {
if (Main.sessions.contains(user)) {
// treat as raw buffer
Main.sessions.write(user, message);
}
else {
ConnectionInit heartbeat = Main.gson.fromJson(message, ConnectionInit.class);
String s = Main.config.getTTY(heartbeat.device + '.' + heartbeat.tty);
// make sure that the tty exists in config
if (s == null)
user.close(400, "Invalid device/tty!");
// get UUID
Main.sessions.newSession(s, user);
logger.info("created session (" + user + ") with dev " + heartbeat.device + ":" + heartbeat.tty);
user.getRemote().sendString(Main.gson.toJson(new ConnectionOpenResponse() {{
tty = s;
}}, ConnectionOpenResponse.class));
}
}
catch (SessionException e ) {
user.close(500, e.getMessage());
}
catch (JsonSyntaxException e) {
user.close(400, e.getMessage());
}
catch (IOException e) {
// wtf
}
}
}
I have registered it correctly in my Main class, and all seems to work well when I attempt to connect to it using websocat, I can send data and all works well. However, as soon as I create a webpage, the websocket never even opens:
console.log("ws://" + location.hostname + ":" + location.port + "/device");
const socket = new WebSocket("ws://" + location.hostname + ":" + location.port + "/device");
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Press enter to re-flush buffers\n');
//while(socket.readyState !== 1);
//console.log("connected!");
socket.send("testdata");
term.onData( (data) => {
console.log(data);
if (data.charCodeAt(0) == 13)
socket.send('\n');
socket.send(data);
});
// Listen for messages
socket.addEventListener('message', function (event) {
term.write(event.data);
});
Now, the code prints out the correct URL (ws://localhost:16838/device), however, it is stuck at CONNECTING, and throws the following error (which I expect because it's still connecting):
Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.
Looking at my server logs, I can see that it does print Websocket connected!, which doesn't even make any sense. Any help with fixing why my JS websocket client gets stuck?
Turns out you need to add the open event or else it doesnt actually open

Private message not send in SignalR

I am working on a very simple project where a user sends a private message to another through the server using the SignalR library. I used this code as a base https://www.codeproject.com/Articles/562023/Asp-Net-SignalR-Chat-Room
I started with an easy functionality test but my recipient is not receiving the message and It doesn't work properly, can you help me understand why?
In my program usernames are generated dynamically in the session, those in the code below are not real data, I just used them for the example
Client side
</script>
<script type="text/javascript" src="/Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.signalR-1.2.2.js"></script>
<script type="text/javascript" src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
var chatHub = $.connection.chatHub;
console.log('connected')
chatHub.client.messageReceived = function (userName, message) {
alert("You have a new message");
}
$.connection.hub.start().done(function () {
chatHub.server.connect('FromUsername');
$('#btnSend').click(function () {
var userId='ToUsername'
var msg = 'Test';
chatHub.server.sendPrivateMessage(userId, msg);
});
});
});
</script>
Server side
public class ChatHub : Hub
{
#region Data Members
static List<UserDetail> ConnectedUsers = new List<UserDetail>();
static List<MessageDetail> CurrentMessage = new List<MessageDetail>();
#endregion
#region Methods
public void Connect(string userName)
{
var id = Context.ConnectionId;
if (ConnectedUsers.Count(x => x.ConnectionId == id) == 0)
{
ConnectedUsers.Add(new UserDetail { ConnectionId = id, UserName = userName });
// send to caller
Clients.Caller.onConnected(id, userName, ConnectedUsers, CurrentMessage);
// send to all except caller client
Clients.AllExcept(id).onNewUserConnected(id, userName);
}
}
public void SendMessageToAll(string userName, string message)
{
// store last 100 messages in cache
AddMessageinCache(userName, message);
// Broad cast message
Clients.All.messageReceived(userName, message);
}
public void SendPrivateMessage(string toUserId, string message)
{
string fromUserId = Context.ConnectionId;
var toUser = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == toUserId) ;
var fromUser = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == fromUserId);
if (toUser != null && fromUser!=null)
{
// send to
Clients.Client(toUserId).sendPrivateMessage(fromUserId, fromUser.UserName, message);
// send to caller user
Clients.Caller.sendPrivateMessage(toUserId, fromUser.UserName, message);
}
}
public override System.Threading.Tasks.Task OnDisconnected()
{
var item = ConnectedUsers.FirstOrDefault(x => x.ConnectionId == Context.ConnectionId);
if (item != null)
{
ConnectedUsers.Remove(item);
var id = Context.ConnectionId;
Clients.All.onUserDisconnected(id, item.UserName);
}
return base.OnDisconnected();
}
#endregion
#region private Messages
private void AddMessageinCache(string userName, string message)
{
CurrentMessage.Add(new MessageDetail { UserName = userName, Message = message });
if (CurrentMessage.Count > 100)
CurrentMessage.RemoveAt(0);
}
#endregion
}
When I execute the program it shows log "connected" on the console and the event fires when button is pressed but for some reason the message is not sent or not being received
What are you missing in your code is to start to listen to your server, what that method send to you like
.on("YourMethodName")
after the connection is made. Also is recommended to resolve users with connectionId, you you can call a specific user like:
Clients.Client(Context.ConnectionId).sendPrivateMessage(fromUserId, fromUser.UserName, message);

How can I get defined instance/var from Java in NativeScript?

I've created a plugin which connects and subscribes to pusher channel successfully via NativeScript using this Java plugin,
now I'm trying to create an eventListener to get events in Nativescript,
this is my Java plugin:
public class PusherAndroid {
public void connectToPusher(String app_key, String channel_name, String event_name) {
PusherOptions options = new PusherOptions().setCluster("eu");
Pusher pusher = new Pusher(app_key, options);
pusher.connect(new ConnectionEventListener() {
#Override
public void onConnectionStateChange(ConnectionStateChange change) {
System.out.println("State changed to " + change.getCurrentState() +
" from " + change.getPreviousState());
}
#Override
public void onError(String message, String code, Exception e) {
System.out.println("There was a problem connecting!");
}
}, ConnectionState.ALL);
Channel channel = pusher.subscribe(channel_name);
channel.bind(event_name, new SubscriptionEventListener() {
#Override
public void onEvent(PusherEvent event) {
System.out.println("Received event with data: " + event.toString());
}
});
}
}
and this is my module:
module.exports = {
connect:function(app_key, channel_name, event_name) {
var psh = new com.pxb.pusherandroid.PusherAndroid();
psh.connectToPusher(app_key, channel_name, event_name);
var EventListener;
function initializeEventListener() {
if (EventListener) {
return;
}
EventListener = com.pxb.pusherandroid.PusherAndroid.extend({
interfaces: [com.pusher.client.channel.SubscriptionEventListener],
onEvent: event => {
console.log(event);
}
});
}
initializeEventListener();
<HERE I NEED MY CHANNEL>.bind(event_name, new EventListener());
}
};
Now, how can I get this channel in Javascript, to use it as my defined connected channel and bind eventListener to it?
Channel channel = pusher.subscribe(channel_name);
thank you
I dont really know how NativeScript works, but couldn't you just searialize your Channel to a json string, store it in a global variable on your PusherAndroid class and then access and desearialize it on your module?
thanks to #Manoj, there's no need to code in Java and try to use them in Javascript,
we can directly use Java classes and methods with Javascript,
there's really not enough reference for this.
here is my module after deleting all java code and just calling the classes and methods from pusher-java-library directly:
module.exports = {
connect:function(app_key, channel_name, event_name) {
PusherOptions = com.pusher.client.PusherOptions;
Pusher = com.pusher.client.Pusher;
Channel = com.pusher.client.channel.Channel;
SubscriptionEventListener = com.pusher.client.channel.SubscriptionEventListener;
PusherEvent = com.pusher.client.channel.PusherEvent;
var options = new PusherOptions().setCluster("eu");
var pusher = new Pusher(app_key, options);
pusher.connect();
var channel = new Channel(pusher.subscribe(channel_name));
}
};
now going to add my eventlistener with Javascript <3

How can I remove user from Hub?

I'm sending by ajax post request to a method in the controller a string 'userName' that I should kick.
Is it possible to remove the user from current hub calling the method in the controller?
public ActionResult Kick(string userName)
{
var hubContext = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
var user = userService.GetUserByName(userName);
var room = chatRoomService.GetRoomById(user.ChatRoomId.Value);
user.IsKicked = true;
userService.LeaveRoom(user);
hubContext.Groups.Remove(user.ConnectionIdInHub, room.Name);
return Json(new {success = true});
}
Could i somewhere in this method disconnect user from hub?
Server Side-
You should store user's connection ID at the time of his connection.
Like this in server side-
public override Task OnConnected()
{
Boolean isFoundAnydevice = false;
if(receivedClientId.Length>0) //With Param
{
int noOfSelectedDevice = _context.TargatedDevice.Where(x => x.PhoneId == receivedClientId).Count();
if (noOfSelectedDevice > 0)
isFoundAnydevice = true;
}
else //With no Param
{
String deviceId = _context.Device.Where(d => d.ConnectionId == this.Context.ConnectionId).Select(d => d.ClientId).SingleOrDefault();
int noOfSelectedDevice = _context.TargatedDevice.Where(x => x.PhoneId == deviceId).Count();
if (noOfSelectedDevice > 0)
isFoundAnydevice = true;
}
if (isFoundAnydevice)
{
_logger.LogWarning(
receivedClientId + " added to Test group"
);
Groups.Add(this.Context.ConnectionId, testGroupName);
}
return base.OnConnected();
}
Then you can easily find the user's connection ID from DB.
Now you can easily stop the hub connection like this-
public Task Disconnect(string connectionId)
{
try
{
lock (_lock)
{
var connections = _registeredClients.Where(c => c.Value.Any(connection => connection == connectionId)).FirstOrDefault();
// if we are tracking a client with this connection
// remove it
if (!CollectionUtil.IsNullOrEmpty(connections.Value))
{
connections.Value.Remove(connectionId);
// if there are no connections for the client, remove the client from the tracking dictionary
if (CollectionUtil.IsNullOrEmpty(connections.Value))
{
_registeredClients.Remove(connections.Key);
}
}
}
}
catch (Exception ex)
{
Log.Error(this, "Error on disconnect in hub", ex);
}
return null;
}
More can be found in here.
Client Side-
If you like to do it from client side, you can do this-
$.connection.hub.stop();
Hope you have your answer

Trying to create websockets and using HttpSelfHostServer

I just got handed a new project where most of the job was already done but I needed to change some things for my project. I have a self hosted server setup like this in a consoleapp:
using (var server = new HttpSelfHostServer(config))
{
server.OpenAsync().Wait();
Console.WriteLine("Press enter to exit");
Console.ReadLine();
}
and a route configured like this:
private static HttpSelfHostConfiguration CreateWebServerConfiguration()
{
var config = new HttpSelfHostConfiguration(string.Format("http://{0}:{1}", Environment.MachineName, 80));
config.Routes.MapHttpRoute("Api", "api/{controller}/{id}/{value}", new {id = RouteParameter.Optional, value = RouteParameter.Optional });
config.Routes.MapHttpRoute("Defect", "defect/{action}/{id}", new { controller = "Defect", action = RouteParameter.Optional, id = RouteParameter.Optional });
config.Routes.MapHttpRoute("Content", "content/{action}/{file}", new { controller = "Content"});
config.Routes.MapHttpRoute("Default", "{controller}/{action}/{id}/{date}", new { controller = "Home", action = "Index", id = RouteParameter.Optional, date = RouteParameter.Optional });
var templateConfig = new TemplateServiceConfiguration { Resolver = new DelegateTemplateResolver(name => ReadFileContent("Views", name))};
Razor.SetTemplateService(new TemplateService(templateConfig));
return config;
}
This works perfectly, but I ran into a situation, where I didn't want the front end to pull with a timer on the server(currently auto refresh every 5 min). I want the server to update the frontend, when there is something new to update. I found the solution to this which would be websockets, but I have a lot of problems using those.
my .js file:
(function() {
if ("WebSocket" in window) {
alert("WebSocket is supported by your Browser!");
} ws://' + window.location.hostname + window.location.pathname.replace('index.htm', 'ws.ashx') + '?name='
var socket = new WebSocket("ws://localhost:80/WebsocketServer.cs");
socket.onmessage = function(event) {
alert("message recv.");
alert(event.data);
};
socket.onopen = function() {
alert("open");
}
socket.onerror = function(errorEvent) {
alert("Error");
alert(errorEvent);
};
socket.onclose = function(closeEvent) {
alert(closeEvent.code);
}
})();
I found multiple examples like this one: https://blog.simpleisbest.co.uk/2012/05/01/websockets-with-asp-net-4-5-and-visual-studio-11/ but it doesn't seem to work for me, this is my files:
WebsocketServer.cs
public class WebsocketServer : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (context.IsWebSocketRequest)
{
context.AcceptWebSocketRequest(new WebSocketManager());
}
}
public bool IsReusable
{
get { return false; }
}
}
WebSocketManager.cs
public class WebSocketManager : WebSocketHandler
{
public static WebSocketCollection clients = new WebSocketCollection();
public override void OnClose()
{
clients.Remove(this);
}
public override void OnError()
{
}
public override void OnMessage(string message)
{
}
public override void OnOpen()
{
clients.Add(this);
clients.Broadcast("Connected");
}
}
The frontend returns closing code 1006 or CLOSE_ABNORMAL. My guess is the link to the backend isn't created?

Categories