Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I implement the pop out functionality of chat windows in GMail?

Tags:

javascript

I'm not looking for a full implementation, I'm more interested in how they do it. I know they use GWT, but I'd like a more low level answer. Naively, I would start by thinking when you click the popout link they simply open a new window and copy content into it. There are lots of reasons why that won't work out well, so I'm wondering if anyone knows or has ideas on how they do this or how it could be done.

like image 782
Bialecki Avatar asked Oct 04 '08 06:10

Bialecki


People also ask

How do I pop out chats in Gmail?

If you're already on a conversation and want to pop up a different one, just look to the left of your screen – the 'Chat' section. Hover your cursor over the chat you want to pop up. You will see a southeast pointing arrow at the bottom-right corner of the chat tile. This is the 'Open in a pop-up' button.

Does Gmail have a Chat feature?

To enable the feature on iOS or Android, open the side menu and scroll down to Settings. If you have multiple accounts, select the one you want, then look for “Chat (early access)” under General. Flipping the toggle will turn it on (after you restart the app).

Can Google Chat be its own window?

Quick launch summaryYou can now configure the Chat Progressive Web Application (PWA) to "Start app when you sign in" to your computer. This can be done on your Windows, MAC OS or Linux computer by going to chrome://apps, right clicking on Google Chat and then choosing "Start app when you sign in."


2 Answers

I would say the easiest way would be to have the data stored on the server (which you probably do already), then just have the new window retrieve that data.

Of course that wouldn't persist things like contents of a text-box the user has input, so depending on what the window is for, it may be impractical.. but it's always best to start trying the simplest option!

like image 30
dbr Avatar answered Oct 29 '22 03:10

dbr


I recently needed to solve exactly this problem in an app. I ended up using this great little jQuery plugin to do the trick: WindowMsg (see link at bottom) While I'm sure there are other ways to accomplish the same task, that plugin does works thusly:

  • first you create a new child window from your original window using window.open
  • you save a reference to the window object returned by window.open
  • you call a library method in the child window that adds a hidden form for the library to store data in
  • you call a library method in the parent window that uses window.document.forms to populate form fields on the child window (the library abstracts all of this stuff so you wouldn't even know there was a form involved unless you looked at the source) window.document.forms works the same on all major browsers so this abstraction in x-browser compatible
  • finally, the child window refers back to its parent window using window.opener and can communicate back via a parallel hidden form on the parent
  • the library implements a convenient helper that takes a callback function to run on each side to make the callback chain easy to deal with

In my experience working with the library, it would have also been quite nice if they had included the JSON 2 lib from JSON.org. Out of the box, WindowMsg only allows you to send string messages between windows, but with some pretty simple use of the JSON 2 lib, I was able to hack it to allow the sending of full JSON objects between windows. I bet more mature libraries (such as whatever google uses) include that kind of serialization and de-serialization baked in.

I am putting this link here because for some reason, the Stack Overflow formatter turns it into an anchor link with no closing tag and I don't want my whole post to be one giant hyperlink!

WindowMsg: http://www.sfpeter.com/2008/03/13/communication-between-browser-windows-with-jquery-my-new-plugin/

like image 123
Greg Borenstein Avatar answered Oct 29 '22 01:10

Greg Borenstein