Sending websocket message to client with parameter

Question

is there a way to send websocket message with parameter ? I would like to send a message to the website, and from the website be able to redirect it to correct div.

The concept is to send message + id, and depending on the id redirect it where it belongs. The id can be number or letter.

So far this is my partial server code (simplified):

  def on_message(self, message):
    global c
    if message == "w": 
    c = "8";
    if message == "s":
    c = "2"
    if c == '8' :
    self.write_message("This should appear in first div ")
    elif c == '2' :
    self.write_message("This should appear in second div ")

And client code:

<div id="output">First div</div>
<div id="output2">Second div</div>

 socket.onmessage = function(msg)
{
    showServerResponse(msg.data);
}
function showServerResponse(txt)
{
    var p = document.createElement('p');
    p.innerHTML = txt;
    document.getElementById('output').appendChild(p); 
}

This is binded to send any message to div "output".

Should I override write_message function ? How should it look like ?

Thanks for any advice.

Community · Accepted Answer · 2017-05-23 10:26:11Z

2

If you want to send parameters, simply send your message as a JSON string. This is the way to do it through websockets.

In your javascript you can send something like

socket.send(JSON.stringify({messageid : "your id", message : "your text message"});

And receive a JSON string like that

socket.onmessage = function(data){
     var message = JSON.parse(data.data);
     // now you have your JSON object in the var message

     console.log(message); // outputs the object in the browser's console
}

Actually, I think a good practice is to communicate using only JSON (or XML) when using a websocket. This way your application will be more coherent.

Using JSON allows you to send structured messages to your client also. There is for sure a JSON lib for your server-side language.

Sorry I can't help more with the server side script since I don't know tornado and almost no python but tornado write a Jsonp object should help.

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Feb 27, 2014 at 15:24

Johnride

8,7655 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zoidbergus Over a year ago

Good idea, I am looking at it right now. So .. I should be able to access the parameters on server side using JSON.parse, right ? Can I send JSON data to server the same way ?

Johnride Over a year ago

On the server you will have to parse the JSON using the function provided by your python JSON library which will be something like from tornado.escape import json_decode and then you can use json_decode(data_received). Do some research to find out the exact way to do it I'm just guessing right now.

Zoidbergus Over a year ago

Solved, thanks for guidance, I will write my solution as an answer.

Zoidbergus · Accepted Answer · 2014-03-01 15:40:16Z

So, I will repair it to JSON but now I'm sending letters from website:

socket.send("w")
socket.send("s")

and on server side are waiting JSON objects:

forward = { "messageid": 1,
         "message": "First message"
       }
backward = { "messageid": 2,
         "message": "Second message"
       }

And depending on case I send back to client JSON:

def on_message(self, message):
  global c
  if message == "w": 
  c = "8";
  if message == "s":
  c = "2"
  if c == '8' :
  self.write_message(json_encode(forward))
  elif c == '2' :
  self.write_message(json_encode(backward))

Back in browser is function waiting for json object:

<div id="output">First div</div>
<div id="output2">Second div</div>

socket.onmessage = function(msg){
 var message = JSON.parse(msg.data);
 if(message.messageid== 1)
  {
   showServerResponse(message.message)
  }
 if(message.messageid== 2)
  {
   showServerResponse2(message.message)
  }
}

And the function to show to div:

function showServerResponse(txt)
{
 var p = document.createElement('p');
 p.innerHTML = txt;
 document.getElementById('output').appendChild(p); 
}

Second function is showServerResponse2(txt) sending it to 'output2'.

This way you can send messages from server to client to different divs, depending on sent parameter, which was the original question. The thing is it is recommended to send every message with correct parameter, or it may be lost.

Collectives™ on Stack Overflow

Sending websocket message to client with parameter

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related