JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://themurica.app/mediator.js"></script>

JavaScript

var socket = new WebSocket("ws://demos.kaazing.com/echo"),
    pubsub = new Mediator();

socket.onopen = function() {
    pubsub.publish("chat/open")
};

socket.onclose = function() {
    pubsub.publish("chat/close")
};
        
socket.onerror = function() {
    pubsub.publish("chat/error")
};
    
socket.onmessage = function(data) {
    pubsub.publish(data.Type.join(":"), data);
};

pubsub.subscribe("chat:message:send", function(data) {
    socket.send(data);
});
    
pubsub.subscribe("chat:message:receive", function(data){
    console.log(data);        
});

pubsub.subscribe("chat:open", function() {
    console.log("Socket opened.");
    pubsub.publish("chat:message:send", "Hi, server!");
});
    
pubsub.subscribe("chat", function(data){
    alertPlayerForChatMessage(data.message); 
}, function(data){ 
    return data.name == player.name; 
});


pubsub.subscribe("game:environment:status", function(data){ 
    console.log("It has started to " + data.weatherType); 
});