I have a basic chat that works fine, however when a user opens another page (/chat and /profile at same time) I get another connection, and same user will have duplicated sessions in the chat page.
What I am looking for a way to avoid this behavior. Maybe allow sockets only in /chat page?
main.py
....
#socketio.on('message')
def handleMessage(msg):
print ('Message: ' , msg)
send(msg, broadcast=True)
chart.html
var socket = io.connect('http://192.168.56.10/');
socket.on('connect', function() {
socket.send('User has connected!');
});
socket.on('message', function(msg) {
$("#messages_chat").append('<li>' + msg + '</li>');
console.log("receive messages");
});
$("#sendbutton").on('click', function() {
socket.send($('#myMessage').val());
$('#myMessage').val('');
});
views.py
....
#mod.route('/chat', methods=['GET'])
#login_required
def chat():
return render_template("users/chat.html")
Related
I have a web page running on Flask, the user clicks the button then gives celery a long-running program. Ajax keeps polling to check if celery has output. If celery has a result, an alert will be displayed on the web page. Now if the program running in celery is very short, the alert can be displayed occasionally. If the program running in celery takes a long time, it cannot be displayed. And now the web page seems to be: click the button - alert - refresh the page in the order.
ubuntu 16.04, Chrome
the celery parts:
#celery.task(name='app.add')
def add():
z=getLength()
return {'result':z}
#app.route('/addit', methods=['POST'])
def addit():
task = add.delay()
return jsonify({}),202,{'Location': url_for('taskstatus',task_id=task.id)}
#app.route('/status/<task_id>')
def taskstatus(task_id):
task = add.AsyncResult(task_id)
if 'result' in task.info:
response['result'] = task.info['result']
return jsonify(response)
the ajax polling parts:
<script>
function start_long_task() {
$.ajax({
type: 'POST',
url: '/addit',
success: function(data, status, request) {
status_url = request.getResponseHeader('Location');
update_progress(status_url) ;
},
error: function() {
alert('Unexpected error');
}
});
}
function update_progress(status_url) {
// send GET request to status URL
$.getJSON(status_url, function(data) {
if ('result' in data) {
// show result
alert('Result: ' + data['result']);
}
else {
setTimeout(function() {
update_progress(status_url);
}, 1000);
}
});
}
$(function() {
$('#start-bg-job').click(start_long_task);
});
</script>
The actual results may be that the webpages can show an alert when celery is done. But now it can't, please help me to fix this issue, thanks a lot!
I found that if the button that performs the polling and the button that submits the form in the flask are the same, the webpage cannot display the alert. I just created a new button, dedicated to start ajax polling, so that it is successful, the web page can display alert!
Trying to get json data to front end and have tried a bunch of versions of axios requests but keep getting 404 status code.
This is an example of the front end format:
class App extends Component {
constructor () {
super();
this.state = {
message: ''
};
this.handleClick = this.handleClick.bind(this);
}
handleClick () {
axios.get('./hello')
.then(response => {
this.setState({ message: response.data.text });
})
.catch(error => {
console.log(error);
});
}
render () {
return (
<div className="button-container">
<button className='button' onClick={this.handleClick}>Click Me</button>
<p>{this.state.message}</p>
</div>
)
}
}
and back end routing:
#app.route('/hello')
def hello_world():
return jsonify(text='hello world')
Error message says 'Failed to load resource: the server responded with a status of 404 (Not Found)' or says http://localhost:5003/hello doesn't exist
First check your server, which url and port, your api is exposed
You need to pass complete url to axios constructor otherwise it will send request to same origin/url where your client is hosted, .e.g webapp at localhost:3000.
So your code will be
const SERVER_URL = 'http:localhost:5000'
axios.get(`${SERVER_URL}/hello`)
I'm extremely new to React and Python and just trying to do a simple post from a react form to my Python API that will interface with a mongoDB.
I have a form in react that invokes a handleSubmit function on submit. I want the handleSubmit function to POST to my Python API running on port 5000. My react app is running on port 8080.
The handleSubmit looks like this:
handleSubmit(event) {
const axios = require('axios');
const baseUrl = 'http://localhost:5000'
axios.post('http://localhost:5000/api/create', JSON.stringify(params))
.end((error, response) => {
if (!error && response) {
console.log('got a valid response from the server')
} else {
console.log(`Error fetching data from the server: `, error)
}
});
event.preventDefault();
}
Python endpoint code:
#app.route('/api/create', methods=['POST'])
def create(self):
if request.method == 'POST':
print(request.args.get('exp_title'))
return True
return False
When I click the button, my python API endpoint isn't reached because react is trying to post to a route on port 8080. What am I missing?
I've tried using a regular ajax call and get the same result. At one point, I did something and got a CORS error in the browser, but I can't remember how I did that.
To enable cors, you need to install pip install -U flask-cors,
here is the website: https://flask-cors.readthedocs.io/en/latest/
or you can define cors in proxy in your reactjs package.json like here:
https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development
Once you install cors in your python app, try this:
Python app:
#app.route('/api/', methods=['POST', 'GET'])
def api_post():
if request.method == 'POST':
print('post app')
req = request.json
print(req)
return jsonify(name='john')
React app:
function App() {
const [todos, setTodos] = useState(null);
const [value, setValue] = useState('');
function handleSubmit(e) {
e.preventDefault();
const data = { name: value };
console.log('submit');
console.log(value);
fetch('http://127.0.0.1:5000/api/', {
method: 'POST',
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify(data),
})
.then(res => res.json())
.then(res => console.log(res));
}
function handleValue(e) {
setValue(e.target.value);
}
return (
<section id="app">
<form action="" onSubmit={handleSubmit}>
<input type="text" onChange={handleValue} />
<button> submit </button>
</form>
</section>
);
}
render(<App />, document.querySelector('#root'));
currently i'm implementing real time notifications for my Django project.
I'm following instructions from this tutorial. Problem is, i'm using Socket.io 1.4.5 and tutorial is written for pre-1.0 versions. So i had to adapt some code following 'Migrating from 0.9' guideline on Socket.io site. What i got is:
var http = require('http');
var server = http.createServer().listen(8002);
var io = require('socket.io')(server);
var cookie_reader = require('cookie');
var querystring = require('querystring');
var redis = require('redis');
// Supposedly this should store cookie set by Django
io.use(function(socket,accept){
var data = socket.request;
if(data.headers.cookie){
data.cookie = cookie_reader.parse(data.headers.cookie);
return accept(null, true);
}
return accept('error', false);
});
io.sockets.on('connection', function (socket) {
// Redis client
client = redis.createClient();
// Subscribe to notification channel
client.subscribe('notifications.' + socket.handshake.cookie['sessionid']);
console.log('subscribed');
//Grab message from Redis and send to client
client.on('message', function(channel, message){
console.log('on message', message);
socket.send(message);
});
// Unsubscribe
socket.on('disconnect', function() {
client.unsubscribe('notifications.' + socket.handshake.cookie['sessionid']);
});
});
When i'm running this script:
node notifications.js
After 2 seconds of silence i get this error:
client.subscribe('notifications.' + socket.handshake.cookie['sessionid']);
^
TypeError: Cannot read property 'sessionid' of undefined
at Namespace.<anonymous> (path/to/notifications.js)
at Namespace.emit (events.js:107:17)
at Namespace.emit (/path/to/node_modules/socket.io/lib/namespace.js:206:10)
at /path/to/node_modules/socket.io/lib/namespace.js:174:14
at process._tickCallback (node.js:355:11)
Can somebody point me to what i did wrong?
Just found what my mistake was.
To access cookie, instead of socket.handshake i should be using socket.request. So my current code looks like this now:
var http = require('http');
var server = http.createServer().listen(8002);
var io = require('socket.io')(server);
var cookie_reader = require('cookie');
var querystring = require('querystring');
var redis = require('redis');
io.use(function(socket,accept){
var data = socket.request;
if(data.headers.cookie){
data.cookie = cookie_reader.parse(data.headers.cookie);
return accept(null, true);
}
return accept('error', false);
});
io.on('connection', function (socket) {
// Redis client
client = redis.createClient();
// Subscribe to notification channel
client.subscribe('notifications.' + socket.request.cookie['sessionid']);
console.log('subscribed');
//Grab message from Redis and send to client
client.on('message', function(channel, message){
console.log('on message', message);
socket.send(message);
});
// Unsubscribe
socket.on('disconnect', function() {
client.unsubscribe('notifications.' + socket.request.cookie['sessionid']);
});
});
I'm using WebSockets in the Tornado Framework and can't get the data in a html form to be sent to a tornado class.
This is my code:
class MainHandler(tornado.web.RequestHandler):
event = []
def get(self):
self.render('main.html')
def post(self):
MainHandler.event = self.get_argument('event')
When I try and send event to a WebSocketHandler class. no data is received from the form:
class WSHandler(tornado.websocket.WebSocketHandler):
def open(self):
print "tailing..."
db = Connection().blah
coll = db.blah_tail
event = MainHandler.event
print 'Filtered', event
'Filtered' just prints an empty list: "Filtered []".
The html form:
<form action="/" method="post">
<input type="text" name="event" />
<input type="submit" id="open" value="Submit Query" />
</form>
How could you send the form data to the WSHandler class?
Thanks
The js for creating the websocket:
<script>
$(document).ready(function() {
var ws;
$("#open").click(function(evt){
evt.preventDefault();
ws = new WebSocket("ws://" + "localhost" + ":" + "8888" + "/ws");
ws.onmessage = function(evt) $("#display").append(evt.data + "<br />");
ws.onclose = function(evt) {alert("Server connection terminated");};
});
});
</script>
Just like in the example from the Tornado documentation, I'll use a set for the WebSocket clients. Improving this is left as an exercise for the reader.
# clients listing on the WebSocket
clients = set()
class MainHandler(tornado.web.RequestHandler):
def get(self):
return self.render("index.html")
def post(self):
global clients
event = self.get_argument("event")
print "got event", event
if not clients:
print "No WebSockets, no point in querying the database"
return
for coordinate in self.get_coordinates(event):
for client in clients:
print "sending coordinate", coordinate, "to client", client
client.write_message(json.dumps(coordinate,
default=json_util.default))
def get_coordinates(self, event):
# replace with a real database query
for coordinate in ("No", "man's", "land"):
time.sleep(1)
yield coordinate
class WSHandler(tornado.websocket.WebSocketHandler):
def open(self):
global clients
print "WebSocket opened..."
clients.add(self)
def on_close(self):
global clients
print "WebSocket closed..."
clients.remove(self)
The relevant part of the index.html template:
<script type="text/javascript">
$(document).ready(function() {
var ws;
// open WebSocket for getting the results
ws = new WebSocket("ws://" + location.host + "/ws");
ws.onmessage = function(evt) {
$("#display").append(evt.data + "<br>");
};
ws.onclose = function(evt) {alert("Server connection terminated");};
$("#open").click(function(evt) {
evt.preventDefault();
$.post("/", $("#eventForm").serialize());
});
});
</script>
</head>
<body>
<h1>Event follower</h1>
<h2>Enter the event you would like to follow</h2>
<form id="eventForm" action="/" method="post">
<input type="text" name="event" />
<input type="submit" id="open" value="Submit Query" />
</form>
<h2>Coordinates</h2>
<div id="display">
</div>
</body>
When the page is loaded, a WebSocket connection is made to the server to the WSHandler class and the client is added to the clients set. When the page is closed, the WebSocket connection is closed and the server will remove it from the set.
When the open submit button is clicked, the form will be submitted asynchronously using AJAX to MainHandler.post. The method will find out the coordinates related to that event and send them to the listening clients as they come it. The browser receives each coordinate and it appends it to the display div.
What is the handler of your function
MainHandler or WSHandler,
Only One of them call at a single time so your syntax
event = MainHandler.event won't produce any result for you.
If your objective is only to submit the form.
Then on Submit type of event you have to write a post or get function associated with your submit call in your JS, That will work with normal tornado.web.RequestHandler on server side.
Ref. tornado web socket chat example
I have updated the chat example :
$(document).ready(function() {
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function() {};
$("#messageform").live("submit", function() {
newMessage($(this));
return false;
});
$("#message").select();
}
});
function newMessage(form) {
var message = form.formToDict();
var disabled = form.find("input[type=submit]");
disabled.disable();
$.postJSON("URL", message, function(response) {
console.log(response);
});
}
function getCookie(name) {
var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
return r ? r[1] : undefined;
}
jQuery.postJSON = function(url, args, callback) {
args._xsrf = getCookie("_xsrf");
$.ajax({url: url, data: $.param(args), dataType: "text", type: "POST",
success: function(response) {
if (callback) callback(eval("(" + response + ")"));
}, error: function(response) {
console.log("ERROR:", response)
}});
};
When you will call $("#message").submit() you will receive form data in you "URL" function
If you want's to use WSHandler then
Ref. example link will help you.
See if this helps.