Show HN: MapChat – A simple location based chat in 300 lines of code | Hacker News Reader

Show HN: MapChat – A simple location based chat in 300 lines of code

idoco.github.io

205 pointsidoco114 comments

So, this is how my experience started. http://cl.ly/image/071f1j0B0M3a

And then it took me like 5 seconds to figure out how to chat. I first tried to click on people's chat to reply to them and then I finally found the text input at the bottom of the screen. Then nothing would happen when I hit enter. Then I eventually found the blue circle send button and that didn't work.

Then I tried Chrome. Worked! So I found some bugs in Safari :)

Amazing that this was done in 300 lines. Something about this format is immediately appealing. Maybe it's because dots on a map feel more human than handles on a forum or comment thread. Anonymity is this double-edged sword in communities. Maybe this is the minimum amount needed to make people behave? Probably not, but something IS interesting here.

Right now it's just people shouting...I hope your next trick is to figure out how to turn it into conversations. Suggestion: Please don't be tempted to just rewrite it or start from scratch. Iterate from this version because 1) it would be faster and 2) this one already has some magic in it.

Thanks for sharing!

Just another data point, but using Safari Version 8.0.6 (10600.6.3), and I didn't see this issue. It worked as one would expect.

Hmm...that's my version as well.

Version 8.0.6 (10600.6.3)

If you use safari connected to the internet with a cable safari does not give the lat-long. Only if you use the wireless. Had this issue the other day.

Not surprised. I'm still very confused why someone would use a web browser built by a company that has a business plan based on shrinking the web.

> I first tried to click on people's chat to reply to them and then I finally found the text input at the bottom of the screen. Then nothing would happen when I hit enter.

I'm having that problem in Firefox.

Thanks for the feedback. I didn't really tested it on Safari yet (Although I did test it on ios) I will look into that :)

I will try to add some features to improve conversation, you are welcome to add and track these suggestions on the issues page of the project.

I agree about conversations - I actually commented that I wish I could respond to people, and somebody responded to that on the map and we had a quick conversation, just knowing that our dots were for each other. It ruled.

Well, that CloudApp link got taken down. It was a video of Safari asking for location permission over and over again. Here's the reason:

"We've noticed that one of your CloudApp drops has been getting an unusual amount of attention: Screen Recording 2015-06-19 at 09.44 AM.gif has had a download transfer rate of 4.2 GB in the last day or so.

Even though we deeply appreciate you trusting us with your data, this violates our download limit and fair use policy. Unfortunately this is not something we are able to host on our servers.

Your drop has been disabled and can't be reached as of this moment. We haven't deleted it from our servers though so if you need to get it back or feel you might have received this email in error please contact us so we can sort it out."

Do you want to make a snowman? http://imgur.com/YDUgG3U

good one

https://www.youtube.com/watch?v=C1ZHetiuRb0

Tip - You can create a private chat map by adding the url #word i.e. http://idoco.github.io/map-chat/#test

Feel free to fork and contribute :) https://github.com/idoco/map-chat

Newbie here. Nice idea ! How much time it took you to buid the site? It is js-only based? By the way, works perfectly on Safari.

Thanks! It took me about two weeks in after work hours. The server is 70 lines of Java (vertx) and the UI is like 200 lines of JS (With very little JQuery)

Would be great if you could put all resources behind https, otherwise browsers do complain:

> Mixed Content: The page at 'https://idoco.github.io/map-chat/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://chatmap.cloudapp.net/chat/info?t=1434731663123'. This request has been blocked; the content must be served over HTTPS

Yes, I was thinking about that. The change is very small, but I'm not sure about its implications.

Currently the websocket connection is in http, I'm not sure how it will effect the server if I change it to https. Will it create more load on it?

It probably won't be too significant, but the only way to be sure is to try it.

Very nice! it would be nice to have an option though that would fuzz your location a bit - I dont have a problem with people knowing im from my city - pinpointing my house is a different thing though...

Yeah, it's pretty creepy to have a very accurate location.

This has serious XSS holes which need fixing! Here is a PR that should do the job (not tested): https://github.com/idoco/map-chat/pull/1

Looks like it's all fixed now :)

Yeah, I added some real XSS protection.

Before today, I thought it would be cool to enable some html :)

Yes, indeed the party is over. Going for beers now ;)

Thank you for your participation in my XSS hackathon experiment ;)

Very nice! Lot of people having fun in there right now, which is a clear sign you did something right.

Thanks!

So much fun!

It seems that a lot of people are trying the 4 days work week ;)

Was that a bad idea posting it on a week day? :)

Not at all! A welcome distraction for a Friday afternoon.

I think something of a timeout on the message bubbles is needed.. As to not cloud the screen too much. Nice work though :)

Was just about to mention that.

Yes, this is at the top of my list. Thanks :)

I got a PR request up on the github if you want it.

https://github.com/idoco/map-chat/pull/11

And it's already been XSS'd to death. I wouldn't recommend visiting this for now.

I think it is now somewhat disabled. you just need to refresh the page.

This is what I did for now

    msg.text =
        msg.text.replace('>','')
            .replace('<','')
            .replace(';','')
            .replace('/','')
            .replace('\\','')
            .replace('\'','')
            .replace('\"','')
            .replace(':"','')
            .replace('!important','');

I will think of a more clever solution next week :)

I see an iframe on the page. Right now.

suddenly someone injected www.leekspin.com while I'm viewing the map.

that made me laugh

This is a naive solution. Pull in some library.

Make your regexs global, i.e. .replace(/</g, "") (note the g at the end), otherwise only the first instance is replaced. I made it easy for you: https://github.com/idoco/map-chat/pull/1

var div = document.createElement('div');

div.textContent = msg;

msg.text = div.innerHTML;

This should remove all HTML/CSS/Script.

Here is how mustache.js[0] does it:

    var entityMap = {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': '&quot;',
        "'": '&#39;',
        "/": '&#x2F;'
     };

      function escapeHtml(string) {
        return String(string).replace(/[&<>"'\/]/g, function (s) {
          return entityMap[s];
        });
      }

also document.createTextNode will tell the browser not to render the children as html, whereas appending a dom element and innerHTML will.[1] I'm just assuming that behavior is correct in all browsers though.

[0]https://github.com/janl/mustache.js/blob/master/mustache.js#...

[1]https://jsfiddle.net/1dsygwoj/

Thanks I added that on top of JsHtmlSanitizer.

That's super easy to get around. It only replaces the first occurrence of each.

You are right that was very silly of me. I got some real XSS filter instead.

I just looked through Google Map's API licensing options. Obviously you may quickly max out your limit. It doesn't look like there's really an extended paid model to increase the limit by much? 100k requests is the only additional limit I see.

Does Google not offer much higher limits if you're willing to pay? I'd be curious to try a similar app, but it seems that popularity might kill one pretty quickly with such low API limits.

Not sure if you intended this feature, but using HTML as a chat message is awesome

It was, but I had to disable it for today. Too many xss loop holes.

I see some abuse from some specific IPs, and I'm thinking about automatically black-listing them after two messages in less than a specific threshold. What do you think?

It is done.

Lets try to enjoy some hacking free chat, instead of ruining it. You can fill you spare time by implementing new features and sending me pull requests :)

Great work! Obviously ~300 lines of code isn't enough to do a full-fledged slick interface...but one suggestion that presumably would be easy to implement: a button that closes all current word-balloons.

I was also thinking a "reply" button for threaded discussions between users...but then that would kill the fun simplicity of the app...I just like seeing where HN users are currently this morning. And also, the ways people try to obfuscate XSS attacks

Thanks! The button to close all current balloons is at the top of my list :)

I'm afraid that a reply button might take out some of the fun and the simplicity, but I will conciser that.

Ha haa - interesting to see this. I had something similar in mind when I bought the domain http://chattymaps.com As you can see if you look at it now, the concept has changed somewhat. I'm still looking at adding more 'chatty' features though. If you are interested in doing something more with this, let me know - it could be interesting.

The Chrome Dev Tools geolocation emulation has become a hit. North Korea, Antarctica, and the RMS Titanic are all online.

On my Chrome+OS X Yosemite, I opened it in a separate tab, and went back to working on something else. After a couple of minutes, the laptop really started heating up :). The `Google Chrome Helper` associated with this tab was the culprit, hogging 100% CPU. Killed it and everything came back to normal.

Anyone else experience that?

What's the name of the russian sounding song that someone injected? I've been searching it for ages!

Loituma - Ievan Polkka

Thanks! I want to say I love you but I will only say that I wanted to say it :P

You're looking for https://en.wikipedia.org/wiki/Loituma_Girl

That's Finnish.

Very cool. Wish there were some form of message persistence. Otherwise the speed at which I type is limited to how quickly others acknowledge what I say, and that slows the entire conversation down.

Adding more traditional scrolling chat bubbles (see Ultima Online) would help that I think.

very nice idea! :-)

perhaps it needs:

* something to zoom the map (and thus, filtering messages for a given radius) * and/or something to organize messages in a way they don't overlap :P (eg: balloons with a number, when clicked it shows the full list of messages)

Thanks!

It is possible to save the message history on the client side. But I though that this is fun to have no history :) Right now notifications (The switch on top) gives you some history.

I disabled the zoom buttons, because I was thinking about mobile browsers and the very limited screen space they have. I will reconsider

agree on storage :-) I just meant something to organize/view messages during a session. client side, of course :)

PS: it's so amazing to see all that people around the world at the same time, on a map. sounds like a new world to explore :P

Alternate interface suggestion: Keep a rolling chat box. For avatars of each person, use a smallinsh picture of the area surrounding their dot. That might bump up the line count a bit though.

I think that'd provide a nice basis for fleshing it out.

Came here to post exactly this.

Nice hack! It felt like using the old Yahoo! chat rooms implemented on a world map. Chaotic environment, everybody writes, barely anyone replies to any message that makes sense. It's fun!

Notifications should be limited to the messages visible within your bounding box. If I've zoomed in on a city, I don't want notifications from somewhere half-way around the world.

Yes! Right now it is just broken :) you get an endless stream of notifications, I will add a very simple distance filter.

I'm not so sure about distance. Maybe based on your zoom level? Because if you're zoomed out, I'd guess you want more notifications than if you're zoomed in on a city or region.

Very cool project. A lot of people active already playing along. Would be nice if we could PM one another that to start a one-on-one convo with someone in a place we're interested in.

Looks like the user's dot/bubble can be dragged around.

Yes, this is intentional. I found it easier to be able to move users that blocked my view. They pop back into place after they write again.

Maybe I'll change it after I'll make messages dissolve after some time.

From the chat that I followed a while, seems like we agreed that this is a bug rather than a feature :P

Also requested are message history and dots of different colors.

Two features to replace dragging:

1. Fade timeout on messages (10 to 20 seconds).

2. Clicking on a chat bubble needs to bring it to the front (change the z-index). Sometimes just want to read a specific message hidden behind another, and having to click to close gets tired fast. Extra bonus if future messages from the same person you've clicked on once always pop up on top of others in the area (or provide a little "pin" option in each chat bubble, but that will probably clutter too much).

And as a separate suggestion already mentioned by others:

3. The ability to toggle the enableHighAccuracy boolean. Exact street address is a little too creepy.

It doesn't work for me. I can see other people's messages but. When I type and press enter or send button nothing happens. Tried with both Iceweasel and Chromium.

Love it. Would love to read my news this way. I find this much more intuitive and antural than Twitter. You have a hot product here OP, congratulations.

"Connection lost, please refresh :("

Every time I load the page.

Does the problem still persist? which browser are you using? Are you on some restricted network? (Like an internal company network behind a fire wall?)

Very cool. I could see something like this replacing/augmenting the current social networking paradigm.

FYI, someone just managed to inject a javascript alert.

XSS everywhere.

Very fun app! Love it! Are chat bubbles auto disappearing? maybe let us set a timer?

Just add the concept of mayorship for the cities and this thing gonna last long!

Awesome! Could this unintentially DDOS google's map tile server / API?

I'm using a google maps api key to track this, and so far I had only 11K hits on their server. The free limit is 25K for 90 days. After that I'll need to start pay :)

How about only pulling messages and users from within your zoomed-in map bounds?

This is super, will fork it into a private chat with bunch of my friends.

Good to hear! This is my intention.

If you implement some new cool features, I'll be glad to merge them.

Seems like there's quite a few Ido Cohens. How to contact you?

Hi, I'm not sure what is the best way :)

GitHub issues are a good way if you want to comment about the app. You can also contact me at ido.mapchat @gmail.com

I would like to see how many people are in there (screen-wise).

Good idea! Thanks.

BTW as for writing this message there are 150 people on the map :)

Hello World :)

Ok I added a real XSS filter, lets hope that it holds :)

Poland stronk, wykop.pl :) Old working xss <>.''"".:/:/,,iframe=iframe=src <iframe src="javascript:window.alert('asd')"/>

The most recent chats should have a higher z-index.

tip: messages should fade after 15? seconds

Cool but I received javascript from xss...

Would be neat to have private rooms.

There are private rooms, but the UI do not support that yet. Just add #word to the url and get your private chat map. i.e. http://idoco.github.io/map-chat#test

Sweet!

very cool actually seeing all the other writers - a counter would actually be a great idea

Yeah, I will work on that today, golro ;)

Golro, Are you related to the famous Golro08? :-)

The leekspin is getting annoying.

Seems like a fun little project!

I would like a clear button.

Just refresh browser :)

got an alert() in there, unsanitized input?

great concept, just needs some more polish

Thanks for your feedback. The next things I will add are users and messages counters.

Reply on news.ycombinator.com