Context:
I am developing a Ruby On Rails application and I started using React.js to manage my javascript components.
My application provides a facebook-like chat: several chats are displayed at the bottom of the page.
Problem
I have a ChatList component that renders the chats. A chat is made of its messages and its form. When this form is submitted, an AJAX call is made to the server to POST the message and the message is added to the current chat.
this.setState({messages: this.state.messages.concat([newMessage])});
The server then broadcast Javascript code to the receiver.
This is where I'm stuck. How can I add the message to the correct chat? How can I select my React.js component and change its 'props'?
When I was not using react, I used to broadcast this code to the other user:
$("#chat-<%= chat.id %>").append("<%= message.content" %>);
I guess I have to find a way to select the React component (the chat instance) and change its property "messages". How?
Thank you for your help! :)
EDIT: I'm going to add more information, just in case:
My ChatList is a global variable that takes an array of Chats.
Each Chat takes an array of Message and a form.
When I submit the form of a chat, it adds the message to the Chat (locally and it also posts the new message to the server). When the server receives the POST event, it can render javascript code to the other user.
This code should add the message to the correct Chat for the correct user. There are two pieces missing:
I don't know how I can "select" the Chat.
I don't know how I can add a message to the "messages" array of this Chat.
You'll want to have your chat component listen to a WebSocket event for a new message and then call setState when a message is received.
The standard approach with Chatrooms is to use "channels" that each chat room subscribes to. That way it only hears about incoming messages from the conversation it cares about.
Check out Socket.io and its example on making a chat application. Even if you don't use Socket.io the example will be illustrative.
The solution, in my Chat class:
componentDidMount: function(){
this.props.privateChannel.bind('message.new', this.receiveMessage);
},
receiveMessage: function(message) {
if(message.user.id == this.props.recipient.id){
this.setState({messages: this.state.messages.concat([message])});
this.startBlink();
}
},
Related
I'm creating a chat application with Angular and I got stuck on the following case:
When a user sent a message he has to click the chat area (it is a textarea) again to send a new message.
How can I keep the textarea active when a message is sent and the client to be able to write instantly after that without click the textarea again?
I tried to simulate a click (el.click()) on the textarea after the message is sent but it doesn't help. I tried also with el.focus().
If anyone else stuck on a similar case here is the solution:
el.focus()
should be done in
ngAfterViewInit()
I'm building a chat room type system in Rails and I need to detect when the user leaves the channel (i.e. closes the page) on the server so I can update the list of active users. I've searched the documentation and examples on GitHub and can't seem to find the answer.
I've used SignalR in the past, which triggers a disconnect event, but I can't find the equivalent (if it indeed exists) in Rails 5.
I can see examples with a unsubscribed method in the channel class, but this is never triggered whether I navigate to a new page or close the browser completely.
EDIT: Not sure if this helps but I'm not using turbolinks.
It was an issue with beta 2 of Rails 5. I've tried it in the latest version - beta 4 and it is now triggered as expected.
Here's the github issue for reference: https://github.com/rails/rails/pull/23715
Try this
App.chatroom.disconnected()
=> yourChannel stopped streaming from chatroom #rails terminal
App.chatroom = App.cable.subscriptions.create({channel:
'yourChannel'}, {
disconnected: function () {
App.cable.subscriptions.remove(this)
this.perform('unsubscribed') #in the channel have a method 'unsubscibed' to update users
},
)}
I am writing an app for Corona SDK (Using LuaSocket) to be able to subscribe and post messages to the example chat server that runs in socket.io (using gevent-websocket 0.9).
I have checked that chat.js on the server interacts with ther server like this:
To subscribe to a room:
socket.subscribe('room-2000')
Or interacting with the chat room:
socket.send({room: 'room-2000', action: 'start', name: 'John'})
socket.send({room: 'room-2000', action: 'message', message: 'hi there!)});
etc..
Full js client script.
But I don't find a way to make an app for Corona SDK to interact with a channel. I managed to connect to the server with:
socket.connect( my_ip, my_port)
But cannot find a way to subscribe or post/receive messages, can someone give me a clue? Will be highly appreciate it.
AFAIK, you need to do a WebSocket handshake. Read the WebSocket specifiation.
Otherwise, I can recommend you this Publish/Subscribe library for CoronaSDK/Nodejs
https://github.com/Overtorment/NoobHub
Does anyone know if the YouTube scubscribe button (the one that appears in widgets on various websites) has a callback function once the user has clicked subscribe? I have looked into making my own but due to the fact they load in iframes I dont think its possibe.
It currently (2013-01-08) does not: https://developers.google.com/youtube/iframe_api_reference
Yes they recently added a callback function. In their GUI for creating a subscribe button, you can check "My application listens for button events." and it'll include the callback in the widget code: https://developers.google.com/youtube/youtube_subscribe_button
I am trying to use SendGrid's Event Notification App (http://sendgrid.com/documentation/display/apps/EventNotification) for emails of certain categories. The Event Notification on my SendGrid account is empty. The header I'm putting on my email is:
X-SMTPAPI: {"category":"category","filters":{"eventnotification":{"settings":{"url":"theurl"}}}}
But I'm not getting a callback on my url. A simple curl post on this given url gives me the expected output, so I'm pretty sure that should be working with SendGrid too.
Do you have any ideas on what the header should look like? I couldn't find too much documentation on the website for this specific app...
Thanks!
Here is an example of the header that I am successfully sending with my Sendgrid emails:
headers("X-SMTPAPI" => "{\"unique_args\": {\"customer_id\":\"#{customer.id}\",\"email_batch_id\":\"#{batch_id}\"}, \"category\":\"monthly_statement\"}")
Make sure you have the correct events checked under the event notification settings in Sendgrid.