[DEV] WebSocket Server - Direct connection between webbrowser and gameserver

**Peace-Maker** · **Author**

WebSocket
A WebSocket protocol implementation to create a direct connection between webbrowsers and gameservers.

WebSocket is a protocol designed to create a realtime connection between webbrowsers and webservers via javascript to exchange asynchronous information without reloading the page or requiring a client poll/page refresh.
This plugin provides an interface to create such an WebSocket server via SourceMod. Now you're able to do a live webchat seeing ingame events or even following the game in your browser like SourceTV or exchange whatever information you want.

This plugin doesn't open a server by itself and doesn't do much alone. It's a base for other plugins to implement fancy stuff without knowing the actual protocol.

Code is on github!
https://github.com/peace-maker/sm-websocket

Acknowledgements
This implementation follows the draft version 17 of the websocket protocol specifications, except:

Only partial support for fragmented messages. The plugin can handle incoming fragmented messages and reassemble them, but doesn't split big outgoing messages.
One websocket per plugin. Unlimited amount of connections though.
Multiple plugins opening a websocket on the same ip:port combo both share the WebSocket handle. The socket is only closed, if all plugins using it closed it. If one plugin closes the socket, the forwards are no longer fired, but the socket is still open until the last plugin closes it.
You can't use CloseHandle on websocket handles, since this is implemented in sourcepawn, which doesn't support adding "Handle" types. Use Websocket_Close instead.
You should always close your master websocket in OnPluginEnd().
This adapts to HTTP which is using TCP for connection management. You'll need to have the TCP port unblocked in your firewall to allow reading and writing.

Plugin Interface

Natives

PHP Code:


			
/**
 * Creates a websocket server which listens on the supplied ip:port combination.
 *
 * @param sHostName        The IP to bind to.
 * @param iPort            The port to listen on
 * @param inc            The incoming child connection callback
 * @param we            The error callback
 * @return                A WebsocketHandle or INVALID_WEBSOCKET_HANDLE on error.
 */
native WebsocketHandle:Websocket_Open(const String:sHostName[], iPort, WebsocketIncomingCB:inc, WebsocketErrorCB:we, WebsocketCloseCB:clo);

/**
 * Hooks child socket's events
 *
 * @param childwebsocket    The child websocket to hook.
 * @param recv                Data receive callback
 * @param disc                The disconnect callback
 * @param we                The error callback
 * @return                    True if child socket was hooked, false otherwise
 */
native bool:Websocket_HookChild(WebsocketHandle:childwebsocket, WebsocketReceiveCB:recv, WebsocketDisconnectCB:disc, WebsocketErrorCB:we);

/**
 * Hooks child socket's readystate changes
 *
 * @param childwebsocket    The child websocket to hook.
 * @param readystate               ReadyState change callback
 * @return                    True if child socket was hooked, false otherwise
 */
native bool:Websocket_HookReadyStateChange(WebsocketHandle:childwebsocket, WebsocketReadyStateChangedCB:readystate);

/**
 * Sends text or binary data through the websocket
 *
 * @param childwebsocket    The child websocket to send to
 * @param type                The datatype SendType_Text or SendType_Binary
 * @param sPayLoad             The data to send
 * @param dataSize            If set, it's used as maxlength. Useful for binary data where \0 might be used before the end of the data.
 * @return                    True if child socket was hooked, false otherwise
 */
native bool:Websocket_Send(WebsocketHandle:childwebsocket, WebsocketSendType:type, const String:sPayload[], const dataSize=-1);

/**
 * Gets a child websocket's readyState.
 *
 * @param childwebsocket    The child websocket
 * @return                    The readyState
 */
native WebsocketReadyState:Websocket_GetReadyState(WebsocketHandle:childwebsocket);

/**
 * Unhooks a child socket's events: If there's no plugin listening anymore, the socket is closed.
 *
 * @param childwebsocket    The child websocket
 * @noreturn
 */
native Websocket_UnhookChild(WebsocketHandle:childwebsocket);

/**
 * Closes a listening master socket, created with Websocket_Open.
 * Note: The socket will still be open, if there are more plugins using it.
 * 
 * Call this in OnPluginEnd()!
 *
 * @param websocket    The master websocket
 * @noreturn
 */
native Websocket_Close(WebsocketHandle:websocket);

Requirements

Socket extension

Compiling dependencies

Socket
Base64
SHA-1

Thanks to

sfPlayer and his Socket extenstion
SirLamer - Base64 include

Changelog

Spoiler

Server owners only need the websocket.smx in their plugins folder and the Socket extension installed. This plugin won't compile on the forum due to it's custom include requirements.

**Peace-Maker** · 04-11-2012 , 19:33 Re: [DEV] WebSocket Server

Example

Simple Webchat
HTML based off phpwebsocket's client.html

Creating a connection and listening for events in javascript.
Replace the ip and port with the ones you're using in your websocket_test.sp.

PHP Code:


			
var socket;

function init(){
  
  var host = "ws://192.168.1.100:12345/";
  try{
    if(!window.WebSocket)
        socket = new MozWebSocket(host);
    else
        socket = new WebSocket(host);
    log('WebSocket - status '+socket.readyState);
    socket.onopen    = function(msg){ log("Welcome - status "+this.readyState); };
    socket.onmessage = function(msg){ log("Received: "+msg.data); };
    socket.onerror = function(msg){ log("Error!"); };
    socket.onping = function(msg){ log("Received ping: "+msg.data); };
    socket.onpong = function(msg){ log("Received pong: "+msg.data); };
    socket.onclose   = function(msg){ log("Disconnected - status "+this.readyState+" Code: "+msg.code+". Reason:"+msg.reason+" - wasClean: "+msg.wasClean); };
  }
  catch(ex){ log('Error: '+ex); }
  $("msg").focus();
}

The websocket_test.sp plugin just creates a websocket on port 12345 and listenes for new connections. If some client sends anything to the server, it relays it to all other connected clients as well as to the game chat. Simple as that ;)

You need to strip the .txt suffix off the client.html. The forum won't let me upload .html files.

SourceTV2D
This is the reason why this plugin was made initially. It's still not finished at all and i'm no javascript pro, so the code isn't easy to read, but it works to some extend.
You could preview what's possible with WebSockets over at http://sourcetv2d.wcfan.de/ . It's a realtime stream off our deathmatch server.

Be warned, this isn't stable at all and you should only mess with it for testing and improving reasons. Please post any additions you do

You have to edit the index.html in order to set the right IP of your gameserver to connect to.

asherkin · 04-11-2012 , 20:30

This is really sweet, nice work.

McFlurry

Very awesome.

GoD-Tony

Nice.

Hopefully I'll get a chance to test this out myself!

raydan

Peace-Maker why you got my sourcetv2d

**Peace-Maker**

Quote:

Originally Posted by raydan

Peace-Maker why you got my sourcetv2d

You didn't seem to want to release yours as you compressed the javascript. Still didn't change your mind?

Drixevel · *Last edited by Drixevel; 04-13-2012 at 13:16.*

The only issue I see with that script that shows players live is that they could cheat with it. They can see anyone on the map at anytime with just a quick look and know where they're at.

Note: I mean the example and I know you said it's not perfect but it's a worry of mine. lol

Nomarky

Quote:

Originally Posted by r3dw3r3w0lf

The only issue I see with that script that shows players live is that they could cheat with it. They can see anyone on the map at anytime with just a quick look and know where they're at.

Note: I mean the example and I know you said it's not perfect but it's a worry of mine. lol

Maybe a small delay (if technically possible) would deal with that?

**Peace-Maker**

Currently the plugin denys connections from ips which are already connected and closes them, if a player who's currently watching in sourcetv2d, joins.

I thought of a buffer to store messages for x seconds until sending them out, but it's easier to test in realtime ;)