Reputation: 41
I am working with tornado websockets to update some information on a page. If a user alters something on the screen I want those changes to be shown to all other users with an active connection. I can get the javascript to send the message to the server but I can't figure out how to send that message back out to the clients. here is the javascript and python
$(document).ready(function () {
var ws = new WebSocket("company website, I know this works");
ws.onopen = function () {
console.log("websocket engage");
};
ws.onmessage = $(".column li").on("mouseup", function (evt) {
pid = $(this).attr("id");
oldCid = $(this).parent().parent().attr("id");
newCid = $(this).parent().attr("id");
message = pid + " " + oldCid + " " + newCid;
ws.send(message);
});
ws.onclose = function (evt) {
console.log("connection closed");
};
ws.writemessage = function (evt) {
alert(evt.data);
};
});
here is the python code:
import tornado.httpserver
import tornado.websocket
import tornado.ioloop
import tornado.web
from tornado.options import define, options
define("port", default=8888, help="run on the given port", type=int)
change = "original"
listeners = []
class WSHandler(tornado.websocket.WebSocketHandler):
def open(self):
print "opened a new websocket"
listeners.append(self)
print listeners
def on_message(self, message):
#self.write_message(u"You Said: " + message)
print ("in on_message " + message)
change = message
#self.write_message(message)
def on_close(self):
print 'connection closed'
listeners.remove(self)
def write_message(self, message):
print ("in write message " + change)
self.write_message(change)
def main():
#tornado.options.parse_command_line()
application = tornado.web.Application([
(r'/ws', WSHandler),
])
http_server = tornado.httpserver.HTTPServer(application)
http_server.listen(8888)
tornado.ioloop.IOLoop.instance().start()
if __name__ == "__main__":
main()
Upvotes: 4
Views: 7027
Reputation: 2558
In the python code, you've mapped /ws
to WSHandler
class, but while creating a WebSocket object, you need to do this, in the javascript code :
1)
var ws=new WebSocket("ws://192.168.3.33:8888/ws");
/*
if 192.168.3.33 is the server IP and 8888 is the port, the server is serving on.
So object is mapped to r"/ws". so now the server can identify the request
*/
instead of :
var ws = new WebSocket("company website, I know this works");
2)The onmessage()
event of WebSocket occurs when the server sends back something.
So the javascript code will look like this :
$(document).ready(function () {
var ws=new WebSocket("ws://192.168.3.33:8888/ws");
ws.onopen = function () {
console.log("websocket engage");
};
ws.onmessage = function(evt){
//the received content is in evt.data, set it where you want
};
ws.onclose = function () {
console.log("connection closed");
};
$(".column li").on("mouseup") //the function that sends data
{
pid = $(this).attr("id");
oldCid = $(this).parent().parent().attr("id");
newCid = $(this).parent().attr("id");
message = pid + " " + oldCid + " " + newCid;
ws.send(message);
};
});
Upvotes: 4
Reputation: 715
Redefine:
def on_message(self, message):
print ("in on_message " + message)
for w in listeners:
w.write_message(message)
This will send 'message' to all the connected clients.
Additionaly, I recommend getting rid of your version of self.write_message.
Upvotes: 3