tochman/ac.html

## ac.html
<!DOCTYPE html>
<meta charset="utf-8"/>
<title>WebSocket Test</title>
<script src="https://unpkg.com/actioncable@5.1.4/lib/assets/compiled/action_cable.js"></script>
<script language="javascript" type="text/javascript">

    (function () {
        this.App || (this.App = {});

        // App.cable = ActionCable.createConsumer('ws://localhost:3000/cable');
        App.cable = ActionCable.createConsumer('wss://ca-chat-demo.herokuapp.com/cable');

    }).call(this);

    App.room = App.cable.subscriptions.create('RoomChannel', {
        connected: function (data) {
            // Called when the subscription is ready for use on the server
            console.log(data)
        },

        disconnected: function () {
            // Called when the subscription has been terminated by the server
            console.log('disconnected')
        },

        received: function (data) {
            // Called when there's incoming data on the websocket for this channel
            return this.appendMessage(data);
        },

        appendMessage: function (data) {
            var parent = document.getElementById('output');
            var newChild = data.message;
            parent.insertAdjacentHTML('beforeend', newChild);
            this.notifyMe(strip(data.message).split(':')[1].trim());
        },

        sendMessage: function (message) {
            //debugger;
            //App.room.send({message: {content: message}})
            var xhttp = new XMLHttpRequest();
            //xhttp.open("POST", "http://localhost:3000/messages", true);
            xhttp.open("POST", "https://ca-chat-demo.herokuapp.com/messages", true);
            xhttp.setRequestHeader("Content-type", "application/json");
            xhttp.send(JSON.stringify({message: {content: message}}));
        },


        notifyMe: function (text) {
            if (Notification.permission !== "granted")
                Notification.requestPermission();
            else {
                var notification = new Notification('Notification title', {
                    icon: 'https://github.com/CraftAcademy/craft-assets/blob/gh-pages/images/logo/graphic_only_logo_white.png?raw=true',
                    body: text
                });

                notification.onclick = function () {
                    window.open("http://stackoverflow.com/a/13328397/1269037");
                };

            }

        }
    });

    document.addEventListener('DOMContentLoaded', function () {

        if (Notification.permission !== "granted") {
            Notification.requestPermission();

        }


        var input = document.getElementById('message');
        input.addEventListener('keydown', function () {
            if (input.value.length >= 10) {
                var params = {analysis: {resource: input.value, category: 'text'}};
                var request = new XMLHttpRequest();
                request.open("POST", "https://ca-image-analyzer.herokuapp.com/api/analyses", true);
                request.setRequestHeader("Content-type", "application/json");
                request.send(JSON.stringify(params));
                request.addEventListener("load", function () {
                    var messageData = JSON.parse(request.responseText);
                    if (messageData.results.value === 'Adult') {
                        console.log('no can do!')
                    }
                });

            }
        });


    }, false);

    function strip(str){
        // Remove some tags
        str = str.replace(/<[^>]+>/gim, '');

        // Remove BB code
        str = str.replace(/\[(\w+)[^\]]*](.*?)\[\/\1]/g, '$2 ');

        // Remove html and line breaks
        const div = document.createElement('div');
        div.innerHTML = str;

        const input = document.createElement('input');
        input.value = div.textContent || div.innerText || '';

        return input.value.trim();
    }


</script>

<h2>Message client</h2>

<div id="output"></div>

<form>
    Your message: <input type="textarea" id="message" name="message"/>
    <input type="button" value="Send message"
           onclick="App.room.sendMessage(document.getElementById('message').value);"/>
</form>
	<!DOCTYPE html>
	<meta charset="utf-8"/>
	<title>WebSocket Test</title>
	<script src="https://unpkg.com/actioncable@5.1.4/lib/assets/compiled/action_cable.js"></script>
	<script language="javascript" type="text/javascript">

	(function () {
	this.App \|\| (this.App = {});

	// App.cable = ActionCable.createConsumer('ws://localhost:3000/cable');
	App.cable = ActionCable.createConsumer('wss://ca-chat-demo.herokuapp.com/cable');

	}).call(this);

	App.room = App.cable.subscriptions.create('RoomChannel', {
	connected: function (data) {
	// Called when the subscription is ready for use on the server
	console.log(data)
	},

	disconnected: function () {
	// Called when the subscription has been terminated by the server
	console.log('disconnected')
	},

	received: function (data) {
	// Called when there's incoming data on the websocket for this channel
	return this.appendMessage(data);
	},

	appendMessage: function (data) {
	var parent = document.getElementById('output');
	var newChild = data.message;
	parent.insertAdjacentHTML('beforeend', newChild);
	this.notifyMe(strip(data.message).split(':')[1].trim());
	},

	sendMessage: function (message) {
	//debugger;
	//App.room.send({message: {content: message}})
	var xhttp = new XMLHttpRequest();
	//xhttp.open("POST", "http://localhost:3000/messages", true);
	xhttp.open("POST", "https://ca-chat-demo.herokuapp.com/messages", true);
	xhttp.setRequestHeader("Content-type", "application/json");
	xhttp.send(JSON.stringify({message: {content: message}}));
	},


	notifyMe: function (text) {
	if (Notification.permission !== "granted")
	Notification.requestPermission();
	else {
	var notification = new Notification('Notification title', {
	icon: 'https://github.com/CraftAcademy/craft-assets/blob/gh-pages/images/logo/graphic_only_logo_white.png?raw=true',
	body: text
	});

	notification.onclick = function () {
	window.open("http://stackoverflow.com/a/13328397/1269037");
	};

	}

	}
	});

	document.addEventListener('DOMContentLoaded', function () {

	if (Notification.permission !== "granted") {
	Notification.requestPermission();

	}


	var input = document.getElementById('message');
	input.addEventListener('keydown', function () {
	if (input.value.length >= 10) {
	var params = {analysis: {resource: input.value, category: 'text'}};
	var request = new XMLHttpRequest();
	request.open("POST", "https://ca-image-analyzer.herokuapp.com/api/analyses", true);
	request.setRequestHeader("Content-type", "application/json");
	request.send(JSON.stringify(params));
	request.addEventListener("load", function () {
	var messageData = JSON.parse(request.responseText);
	if (messageData.results.value === 'Adult') {
	console.log('no can do!')
	}
	});

	}
	});


	}, false);

	function strip(str){
	// Remove some tags
	str = str.replace(/<[^>]+>/gim, '');

	// Remove BB code
	str = str.replace(/\[(\w+)[^\]]](.?)\[\/\1]/g, '$2 ');

	// Remove html and line breaks
	const div = document.createElement('div');
	div.innerHTML = str;

	const input = document.createElement('input');
	input.value = div.textContent \|\| div.innerText \|\| '';

	return input.value.trim();
	}


	</script>

	<h2>Message client</h2>

	<div id="output"></div>

	<form>
	Your message: <input type="textarea" id="message" name="message"/>
	<input type="button" value="Send message"
	onclick="App.room.sendMessage(document.getElementById('message').value);"/>
	</form>