Skip to content
LinCerely edited this page Sep 4, 2017 · 13 revisions

Before continuing, make sure you've read the Ten Minute Tutorial!

Setup

There are four parts to working with this model in websocketd. Let Manager.sh manage all your bash scripts when you need them.

  1. echo.sh
  2. count2.sh
  3. wsmanager.sh
  4. websocket.html

1. echo.sh

#!/bin/bash
#This script just echos a string or hello

if [ $# -gt 0 ]; then
    echo $1
else
    echo "Hello, Who are you?"
fi
exit

2. count2.sh

#!/bin/bash
#This is a modified version of the count.sh script in the ten minute tutorial
C=$1
if [ "$C" -eq "$C" ] 2>/dev/null; then
    # $C is a number
    for COUNT in $(seq 1 $C); do
      echo $COUNT
      sleep 1
    done
else
    echo "Sorry, I can't count to $C"
fi
exit

3. wsmanager.sh

#!/bin/bash
#This script is a simple manager for all the other bash scripts.
#This way you only need one running websocketd process.
while read C
do
    cdir=`pwd`
    script=''
    first=''
    args=''

    # does $C have arguments?
    spcs=`echo $C | grep \  | wc -l`
    if [ $spcs -eq 0 ]; then
        first=$C
    else
        # read the first arg to determine what script to run
        IFS=' ' read -a part <<< "$C"

        first=${part[0]}
        #remove the first part of the string, leave all the rest as args to pass to script
        args=${C#${part[0]} }
    fi

    # which script to run?
    if [ "$first" == "echo" ]; then
        script='echo.sh'

    elif [ "$first" == "count" ]; then
        script='count2.sh'
    fi

    if [ ! -z $script ]; then
        #echo $cdir/$script $args
        eval $cdir/$script $args
    else
        echo "I don't understand: $C"
    fi

done
exit

4. websocket.html

Im using JQuery here cause Firefox can't interpret javascript onmessage replies from websocketd.

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <title>Websocketd With Bash</title>
    <style>
      #wsresults {
          font-size: 15px;
          font-family: arial;
          margin: auto;
          padding: 10px;
          text-align: left;
      }
    </style>
  </head>
  <body>

    <div id="wsresults"></div>
    <div><a href="javascript: void(0);" id="1">echo 'JoeWalnes was here'</a></div>
    <div><a href="javascript: void(0);" id="2">echo</a></div>
    <div><a href="javascript: void(0);" id="3">count to 10</a></div>
    <div><a href="javascript: void(0);" id="4">count to Joe</a></div>

    <script>
    //https://github.com/joewalnes/websocketd
    //https://github.com/joewalnes/websocketd/wiki/Websocketd-on-Raspberry-Pi
    var ws = new WebSocket('ws://localhost:8080/');

    ws.onopen = function() {
        document.body.style.backgroundColor = '#cfc';
    };
    ws.onclose = function() {
        document.body.style.backgroundColor = null;
    };
    ws.onerror = function(evt) {
        $('#wsresults').html('Error: '+event.data);
    };
    ws.onmessage = function(event) {
        $('#wsresults').html(event.data);
    };


    $(document).ready(function() {

        $('#1').on('click', function(e){
            if (ws) {
                try {
                    ws.send("echo 'JoeWalnes was here.'");
                } catch (ex) {
                    alert('Cannot send: '+ex);
                }
            }
        });
        $('#2').on('click', function(e){
            if (ws) {
                try {
                        ws.send('echo');
                } catch (ex) {
                        alert('Cannot send: '+ex);
                }
            }
        });
        $('#3').on('click', function(e){
            if (ws) {
                try {
                        ws.send("count 10");
                } catch (ex) {
                        alert('Cannot send: '+ex);
                }
            }
        });
        $('#4').on('click', function(e){
            if (ws) {
                try {
                        ws.send("count 'Joe'");
                } catch (ex) {
                        alert('Cannot send: '+ex);
                }
            }
        });
    }); // end document ready
   </script>

  </body>
</html>

Starting websocketd

Run websocketd through command line

$ ./websocketd --port=8080 --staticdir=. ./wsmanager.sh

Testing

Visit http://localhost:8080 in your browser

Clone this wiki locally