Introducing: HTML WebSockets for MX2! + GitHub

[Abe _King_Participant]

First things first, the repo: https://github.com/forgotten-king/Monkey2-HTML-WebSocket/tree/Dev

Hello, everyone! I’ve just finished developing a working Monkey2 port for WebSockets. This is purely a JavaScript wrap and not available for other exports. Being that this is my first C++ project and third* (2nd) real Monkey2 project this may be a bit rough around the edges. It is currently implemented as a near 1 to 1 implementation with actual HTML5 sockets minus a few smaller things IE:can only send strings, there is also a potential memory flaw with retrieving malocc’d strings from JavaScript.

For anyone interested, once the Module has been accepted it should eventually be accessible through the Modules as “html-ws” and under namespace html.ws. All documentation for this implementation will be found in the main monkey2 file, the C++ files are bare.

As it stands, this is an introductory version, whatever that means, but will be usable in projects. I personally don’t have any problems with my implementation but I figure, hope, there will be suggestions and requests for the current API. I anticipate most comments will be about requesting a near 1 to 1 implementation for the native socket API. I’m not sure how possible it will be, but I will make my best attempt if enough people request or Mark himself prefer it over my current version.

# Spoilers

video: LINK (because thumbnail ruined quality)

Code:

Monkey

Namespace ws_demo #Import "<std>" #Import "<mojo>" #Import "<html-ws>" Using std.. Using mojo.. Using html.ws.. Class DemoSock Extends WebSocket Field Messages:Deque<String> Method New() Super.New("ws://echo.websocket.org/") Messages = New Deque<String>() End Method Send(data:String) Override If Self.ReadyState = ReadyStates.OPEN Then Super.Send(data) End End Method AddMessage(msg:String) Messages.PushLast(msg) If Messages.Length > 15 Then Messages.PopFirst() Endif End Protected Method OnData(data:String) Override AddMessage( "Recieved: " + data ) End Method OnOpen() Override AddMessage("Socket established connected!") End Method OnClose() Override AddMessage("Socket terminated!") End End Class MyWindow Extends Window Field socket:DemoSock Field sends:Int = 0 Method New( title:String="Websocket Demo", width:Int=640,height:Int=480,flags:WindowFlags=Null ) Super.New( title,width,height,flags ) ClearColor= Color.Blue socket = New DemoSock End Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.DrawText( "Monkey Web Sockets. Enter*connects* __ Space*sends hello* __ Esc *closes*, ",0,0 ) socket.Update() Local I:= 0 For Local msg:=Eachin socket.Messages I += 1 canvas.DrawText( msg, 20, 40 + I * 20 ) Next End Method OnKeyEvent( event:KeyEvent ) Override If event.Type = EventType.KeyDown Then Select event.Key Case Key.Space socket.Send("Hello # " + sends ) sends += 1 Case Key.Enter socket.AddMessage("*initiating a connection*") socket.Connect() Case Key.Escape socket.AddMessage("*attempting to close connection*") socket.Close() End End End End Function Main() New AppInstance New MyWindow App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89

Namespace ws_demo #Import "<std>" #Import "<mojo>" #Import "<html-ws>" Using std.. Using mojo.. Using html.ws..   Class DemoSock Extends WebSocket Field Messages:Deque<String> Method New() Super.New("ws://echo.websocket.org/") Messages = New Deque<String>() End Method Send(data:String) Override If Self.ReadyState = ReadyStates.OPEN Then Super.Send(data) End End Method AddMessage(msg:String) Messages.PushLast(msg) If Messages.Length > 15 Then Messages.PopFirst() Endif End Protected Method OnData(data:String) Override AddMessage( "Recieved: " + data ) End Method OnOpen() Override AddMessage("Socket established connected!") End Method OnClose() Override AddMessage("Socket terminated!") End End   Class MyWindow Extends Window Field socket:DemoSock Field sends:Int = 0   Method New( title:String="Websocket Demo", width:Int=640,height:Int=480,flags:WindowFlags=Null ) Super.New( title,width,height,flags ) ClearColor= Color.Blue socket = New DemoSock End   Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.DrawText( "Monkey Web Sockets.   Enter*connects* __ Space*sends hello* __ Esc *closes*, ",0,0 ) socket.Update() Local I:= 0 For Local msg:=Eachin socket.Messages I += 1 canvas.DrawText( msg, 20, 40 + I * 20 ) Next End Method OnKeyEvent( event:KeyEvent ) Override If event.Type = EventType.KeyDown Then Select event.Key Case Key.Space socket.Send("Hello # " + sends ) sends += 1 Case Key.Enter socket.AddMessage("*initiating a connection*") socket.Connect() Case Key.Escape socket.AddMessage("*attempting to close connection*") socket.Close() End End End End   Function Main()   New AppInstance New MyWindow App.Run() End

[PakzParticipant]

So, what can you do with these websockets and games? Is it for multiplayer game like quake in the webbrowser and such?

[Abe _King_Participant]

To answer your question: Yes! If you wanted to make a multiplayer game like quake for browsers WebSockets are the way to go!

To add more details about web sockets:
The reason WebSockets are so important is that they’re currently the most widely supported way of real-time communication from the browser. I can’t explain it better than other articles out there, but for Monkey2 it means you can now have real-time (web)socket based applications in your browser games – which is actually not currently supported in Monkey2 – excluding this module.

Perhaps you wanted to make an online chat room on Monkey2. It can be done multiple ways, but WebSockets were introduced because of the rising demand of real-time connected applications.
So it would look like this:
1. Create a server in a language which has some web-socket host libraries. JavaScript is a good candidate though not what I use.
2. Once your server is set up to handle web sockets, it’s time to make your client
3. All you have to do is extend the WebSocket class and define some handles and you’re essentially done!

[Richard BetsonParticipant]

I’ll be checking this out.

[Abe _King_Participant]

Update for everyone whos been wanting to try it out! I’m not sure how long it will be until my module is excepted but here is the repository! Feel free to dig/play around! The banana should include everything you need to start out with. Feel free to ask questions here or on the issues of the repo.

Github: https://github.com/forgotten-king/Monkey2-HTML-WebSocket/tree/Dev

[XaronParticipant]

Awesome, this is just great, thanks!

[XaronParticipant]

Hey Abe, so it should be possible to create a server application in MX2 which listens to classic sockets plus websockets? As far as I understood this stuff you just need to react in a different way, so you have to send back kind of a http header during connect?

[Abe _King_Participant]

@xaron As far as I’m aware, that should be completely possible. I’ve actually done it in a different language if you’d like to see! Though, the WebSocket transformations were apart of a standard library in the language. But if you would like to learn more about making a WebSocket server that is the base idea. You can find out more here https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers

I will probably be making a WebSocket transformation API sometime in the future, but it’s not a priority of mine at the time being. I can try taking a look at it sooner than later if you’d like! It wouldn’t be a part of this API though

[Richard BetsonParticipant]

Got the demo working on Linux. Playtime!

[Author]

Posts