Webclient

Discussion in 'Development General' started by coyotte508, Nov 26, 2012.

  1. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
    We already have the WebServer (admin web administration on the server), so a web client isn't far-stretched.

    But eh we have several options.

    1. Keep the python intermediary & relay. Converts binary data from PO to json for the websocket. Server knows that the relay is a relay so no problems there
    2. Use a C++ relay on the same machine (or not), communicating with the server via sockets. Parsing can be done easily (just take the client's analyzer and BattleManager libs). Communicating with the webclient via websocket & json
    3. Accept websocket communications from the server, send the regular binary data, and parse things client-side with https://github.com/bigeasy/packet

    Option 1 is deprecated imo. Option 2 is my favorite. If we put the relay on the same machine we reduce lag but increase bandwidth (as JSON uses more bandwidth, just imagine receiving a player list), if we put it on another machine we keep the regular bandwidth but we increase lag (since there's a middle man on a third-party server).

    Option 3 would theorically be the "best" but lol good luck to anyone who would want to write clean parsing/serializing code in javascript!

    Thoughts? If I'm alone in this I'll probably go with option 2.

    Edit: live client
     
    Last edited: Nov 14, 2013
  2. Lamperi

    Lamperi I see what you did there

    Joined:
    Apr 25, 2010
    Messages:
    2,647
    Likes Received:
    11
    2 reuses the most of the code, that's why it's very good.
     
  3. Ethan

    Ethan Member

    Joined:
    Nov 6, 2011
    Messages:
    238
    Likes Received:
    0
    Definitely going to agree with Lamperi and go with option 2, I had the idea in mind but never got around to it
     
  4. Lamperi

    Lamperi I see what you did there

    Joined:
    Apr 25, 2010
    Messages:
    2,647
    Likes Received:
    11
    Of course, the UI is where the real work is :(
     
  5. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
    A simple ui is pretty easy to do, at least where battles are not concerned. (we all know how to add a battle ui easily)
     
  6. Deity

    Deity Designer

    Joined:
    Dec 9, 2010
    Messages:
    195
    Likes Received:
    18
    Good luck guys, looking forward to it. Though I disagree that the UI will be easy. :P
     
  7. d25inferno

    d25inferno New Member

    Joined:
    Sep 15, 2012
    Messages:
    11
    Likes Received:
    0
    Agree with decision on 2 as well.
     
  8. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
    Ethan has said he would start working on the C++ relay station
     
  9. Ethan

    Ethan Member

    Joined:
    Nov 6, 2011
    Messages:
    238
    Likes Received:
    0
    I told coyo he can start on it and if I can help somewhere in between then great

    (Still learning)

    It can be start out simple and then we can make a more advanced UI
     
  10. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
    The relay station code is here.

    The webclient is in a separate project, here.

    The relay station is not yet running on the dedicated server, so you'll have to run your own. For now what you can do is:
    - Select the relay station you want
    - Select the server you want
    - When you choose the server, the relay station connects to it and an empty player shows up on the server. When you close the websocket, the relay station closes its connection to the server and the empty player disappears

    Now that the basis is up, it shouldn't be too hard to add basic stuff. If anyone wants to contribute (with or without my help) please tell me, I'll continue coding anyway meanwhile.
     
  11. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
  12. TheUnknownOne

    TheUnknownOne Member

    Joined:
    Mar 28, 2011
    Messages:
    988
    Likes Received:
    3
    Cool!

    I could help with an improved layout if you'd like.
     
  13. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
    Great, but deity already gave an offer of help regarding the design. Your scripting skills can be very helpful though (for example for this)!
     
  14. TheUnknownOne

    TheUnknownOne Member

    Joined:
    Mar 28, 2011
    Messages:
    988
    Likes Received:
    3
    Alright. I posted on that issue. Will be trying to "resolve" it tomorrow.
     
  15. Deity

    Deity Designer

    Joined:
    Dec 9, 2010
    Messages:
    195
    Likes Received:
    18
  16. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
    For channels? :o

    Anyway it really looks awesome.
     
  17. Deity

    Deity Designer

    Joined:
    Dec 9, 2010
    Messages:
    195
    Likes Received:
    18
    Oh, yeah forgot to mention that. xD I was referring to the listing of channels. But thanks.
     
  18. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
  19. Deity

    Deity Designer

    Joined:
    Dec 9, 2010
    Messages:
    195
    Likes Received:
    18
    Works great coyotte, though you should think about automatically assigning a guest-randomnumber- type of name (Not just because PS does it, but because it's an efficient way of doing it).
     
  20. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
    That's what happen when you enter a blank username, but since alertify doesn't allow a placeholder/default value when prompting, it doesn't show.

    Though maybe what you mean is allow "user=" as a query value, in which case it would log on as a guest automatically. That could work!
     
  21. Deity

    Deity Designer

    Joined:
    Dec 9, 2010
    Messages:
    195
    Likes Received:
    18
    Oh I see, you get what I asked for if you close out of the username prompt when you load the page. Seems like fine functionality (Though maybe instead of the text "Cancel", have "Login as Guest"), again nice job. :D
     
  22. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
    Thanks to TheUnknownOne, now the button appears like that and trainer colors work.

    I also added a "Join channel" text on top left where you can manually join a channel.
     
  23. Lamperi

    Lamperi I see what you did there

    Joined:
    Apr 25, 2010
    Messages:
    2,647
    Likes Received:
    11
  24. TheUnknownOne

    TheUnknownOne Member

    Joined:
    Mar 28, 2011
    Messages:
    988
    Likes Received:
    3
    I wonder how far this project will be after 1 year!
     
  25. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
    Channel leaving / Player list now implemented.

    Next step: private messages. I want them to use channel tabs as well (and that's why several time in the code I check if the current tab starts with "channel-", because player tabs will start with "player-"). I'll probably do them tomorrow if nobody's done it by then :x (I kinda hope they don't, because for some weird reason I look forward to coding it)
     
  26. TheUnknownOne

    TheUnknownOne Member

    Joined:
    Mar 28, 2011
    Messages:
    988
    Likes Received:
    3
  27. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
    You can now receive PMs & answer them, register, and click channel links.

    (to open a new PM window, use /PM <user>, will be removed when functionality improves)
     
    Last edited: Dec 4, 2012
  28. Elements

    Elements BOOMER SOONER Forum Moderator Server Staff Forum Moderator Server Staff

    Joined:
    May 9, 2010
    Messages:
    1,195
    Likes Received:
    48
    PO Trainer Name:
    Elements
    Trying to use the webclient on Internet Explorer doesn't work. You end up getting this message:

    Connecting to ws://server.pokemon-online.eu:10508
    ERROR: [object Error]\

    It would be nice to have the scrollbars automatically scroll when a new chat message is added to the chat too. By this I mean when you go to another channel the chat from the previous channel doesn't automatically scroll down like it does on the regular client. I know you there are more vital aspects that need to be coded, but it definitely would make using the alpha less annoying.

    And a way to detect that a new message has been added in other channels you are on (Channel Flashing).


    Just throwing these out there.
     
    Last edited: Dec 4, 2012
  29. Lamperi

    Lamperi I see what you did there

    Joined:
    Apr 25, 2010
    Messages:
    2,647
    Likes Received:
    11
    Only Internet Explorer 10 supports the WebSocket protocol so you will essentially need Windows 8 as of now to test the web client with IE.
    Otherwise, there's already an issue marked at Github which should enable websockets with Flash for all flash compactible browsers.
     
  30. Deity

    Deity Designer

    Joined:
    Dec 9, 2010
    Messages:
    195
    Likes Received:
    18
    And there's no sort of fallback for IE? Doesn't seem like a good idea to leave out compatibility for one of the biggest browsers (No matter how much most of us hate it). xD
     
  31. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
  32. Deity

    Deity Designer

    Joined:
    Dec 9, 2010
    Messages:
    195
    Likes Received:
    18
    I'd suggest http://modernizr.com/ instead, it'll detect if the browser supports it, then you can show a custom message for any browser that doesn't. Is there no way to use the browser version without HTML5?
     
    Last edited: Dec 4, 2012
  33. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
    Websockets are needed, for now. I don't use other stuff from HTML (for now).
     
  34. TheUnknownOne

    TheUnknownOne Member

    Joined:
    Mar 28, 2011
    Messages:
    988
    Likes Received:
    3
    localStorage is used for options atm.
     
  35. Deity

    Deity Designer

    Joined:
    Dec 9, 2010
    Messages:
    195
    Likes Received:
    18
    Linked you to this already, but it provides AJAX fallback for browsers that don't support websocket. http://code.google.com/p/jquery-graceful-websocket/

    So that would mean only people with JS disabled and using old browsers should have any problems.

    (Also there are JS cookie fallbacks for users without localstorage)
     
  36. coyotte508

    coyotte508 Well-Known Member Administrator Server Owner Administrator Server Owner

    Joined:
    Apr 21, 2010
    Messages:
    6,363
    Likes Received:
    168
    Uuuh designing stuff is impossible in html :(

    Anyway new live client with some parts of the design done, screenshot here.
     
    Last edited: Dec 5, 2012
  37. Lamperi

    Lamperi I see what you did there

    Joined:
    Apr 25, 2010
    Messages:
    2,647
    Likes Received:
    11
    If IE10 supports this, then there are no reason to do the failbacks. If people don't want to update their browsers or computers, it's their problem.
     
  38. Deity

    Deity Designer

    Joined:
    Dec 9, 2010
    Messages:
    195
    Likes Received:
    18
    Horrible way to look at it. xD You want as many people on as possible, not just tech savvy ones. Besides, cutting IE8 out of the equation kills probably 1/3 of your possible users instantly. (And IE10 is Win8 exclusive, tonnns of people are still on Win7)
     
  39. Lamperi

    Lamperi I see what you did there

    Joined:
    Apr 25, 2010
    Messages:
    2,647
    Likes Received:
    11
    I don't know any people under 30 who don't use Chrome, Safari, Opera or Firefox.

    People over 50 are not the target audience of the program ~
     
  40. Deity

    Deity Designer

    Joined:
    Dec 9, 2010
    Messages:
    195
    Likes Received:
    18
    Again, it's uselessly keeping people out... And I know plenty of younger people that use IE lol. I just think it's pointless to not support browsers when it's so easy, it's kind of like you just don't want extra members. x.x
     
    Last edited: Dec 5, 2012