JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

HTML

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

JavaScript

enyo.kind({
    name:"SocketIO",
    kind:"Component",
    published:{
        server:"",
        autoConnect:true
    },
    events:{
        onConnect:"",
        onDisconnect:"",
        onMessage:"",
        onError:""
    },
    socket:null,
    create:function() {
        this.inherited(arguments);
        this.serverChanged();
    },
    serverChanged:function() {
        if(!this.server) return;
        this.autoConnect && this.connect();
    },
    connect:function() {
        this.socket = io.connect(this.server);
        
        this.socket.onmessage = enyo.bind(this, "doMessage");
        this.socket.onconnect = enyo.bind(this, "onConnect");
        this.socket.ondisconnect = enyo.bind(this, "onDisconnect");
        this.socket.onerror = enyo.bind(this, "onError");
        
        // only pulls events from the last in the prototype chain.
        // this is by design but means you can't created "grandchildren"
        // of SocketIO
        for(var k in this.events) {
            var e = k.charAt(2).toLowerCase() + k.substring(3);
            socket.on(e, enyo.bind(this, "eventReceived", k));
        }
    },
    eventReceived:function(eventName, data) {
        this.log(eventName, data);
        this["do" + enyo.cap(inName.slice(2))]({
            socket:this.socket,
            data:data
        });
    }
});

enyo.kind({
    name:"SimpleSocket",
    kind:"SocketIO",
    server:"ws://echo.websocket.org/",
    events:{
        onSongChange:"",
        onSetChange:""
    }
});

new SimpleSocket();