jberger/blocking.pl

## blocking.pl
#!/usr/bin/env perl

use Mojolicious::Lite;
use Mojo::JSON 'j';

use Mango;

# add helper methods for interacting with database
helper mango => sub {
  # cached db connection
  state $mango = Mango->new('mongodb://testuser:mypass@localhost/test');
};
helper people => sub { shift->mango->db->collection('people') };

# setup base route
any '/' => sub {
  my $self = shift;
  my $rows = $self->people->find->all;
  $self->render('index', rows => $rows );
};

# setup websocket message handler
websocket '/insert' => sub {
  my $self = shift;
  $self->on( message => sub {
    my ($ws, $message) = @_;

    my $row = j($message);
    $self->people->insert($row);

    my $html = $ws->render( 'table', rows => [$row], partial => 1 );
    $ws->send(j({row => $html}));
  });
};

app->start;

__DATA__

@@ index.html.ep

<!DOCTYPE html>
<html>
<head>
  <title>People</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
  <div>
    Name: <input type="text" id="name">
    Age: <input type="text" id="age" >
    <input type="submit" value="Add" onclick="insert()">
  </div>
  <br>
  Data: <br>
  <table border="1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody id="table">
      %= include 'table'
    </tbody>
  </table>
  %= javascript begin
    function insert () {
      if (!("WebSocket" in window)) {
        alert('Your browser does not support WebSockets!');
        return;
      }
      var ws = new WebSocket("<%= url_for('insert')->to_abs %>");
      ws.onopen = function () {
        var name = $('#name');
        var age = $('#age');
        ws.send(JSON.stringify({name: name.val(), age: age.val()}));
        name.val('');
        age.val('');
      };
      ws.onmessage = function (evt) {
        var data = JSON.parse(evt.data);
        $('#table').append(data.row);
      };
    }
  % end
</body>
</html>

@@ table.html.ep

% foreach my $row ( @$rows ) {
  <tr>
    % foreach my $value (@{$row}{qw/name age/}) {
      <td><%= $value %></td>
    % }
  </tr>
% }

## nonblocking.pl
#!/usr/bin/env perl

use Mojolicious::Lite;
use Mojo::JSON 'j';

use Mango;

# add helper methods for interacting with database
helper mango => sub {
  # cached db connection
  state $mango = Mango->new('mongodb://testuser:mypass@localhost/test');
};
helper people => sub { shift->mango->db->collection('people') };

# setup base route
any '/' => sub {
  my $self = shift;
  $self->render_later;
  $self->people->find->all(sub{
    my ($cursor, $err, $rows) = @_;
    $self->render('index', rows => $rows );
  });
};

# setup websocket message handler
websocket '/insert' => sub {
  my $self = shift;
  $self->on( message => sub {
    my ($ws, $message) = @_;

    my $row = j($message);
    $self->people->insert($row, sub{
      my ($coll, $err, $oid) = @_;
      my $html = $ws->render( 'table', rows => [$row], partial => 1 );
      $ws->send(j({row => $html}));
    });
  });
};

app->start;

__DATA__

@@ index.html.ep

<!DOCTYPE html>
<html>
<head>
  <title>People</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
  <div>
    Name: <input type="text" id="name">
    Age: <input type="text" id="age" >
    <input type="submit" value="Add" onclick="insert()">
  </div>
  <br>
  Data: <br>
  <table border="1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody id="table">
      %= include 'table'
    </tbody>
  </table>
  %= javascript begin
    function insert () {
      if (!("WebSocket" in window)) {
        alert('Your browser does not support WebSockets!');
        return;
      }
      var ws = new WebSocket("<%= url_for('insert')->to_abs %>");
      ws.onopen = function () {
        var name = $('#name');
        var age = $('#age');
        ws.send(JSON.stringify({name: name.val(), age: age.val()}));
        name.val('');
        age.val('');
      };
      ws.onmessage = function (evt) {
        var data = JSON.parse(evt.data);
        $('#table').append(data.row);
      };
    }
  % end
</body>
</html>

@@ table.html.ep

% foreach my $row ( @$rows ) {
  <tr>
    % foreach my $value (@{$row}{qw/name age/}) {
      <td><%= $value %></td>
    % }
  </tr>
% }
	#!/usr/bin/env perl

	use Mojolicious::Lite;
	use Mojo::JSON 'j';

	use Mango;

	# add helper methods for interacting with database
	helper mango => sub {
	# cached db connection
	state $mango = Mango->new('mongodb://testuser:mypass@localhost/test');
	};
	helper people => sub { shift->mango->db->collection('people') };

	# setup base route
	any '/' => sub {
	my $self = shift;
	my $rows = $self->people->find->all;
	$self->render('index', rows => $rows );
	};

	# setup websocket message handler
	websocket '/insert' => sub {
	my $self = shift;
	$self->on( message => sub {
	my ($ws, $message) = @_;

	my $row = j($message);
	$self->people->insert($row);

	my $html = $ws->render( 'table', rows => [$row], partial => 1 );
	$ws->send(j({row => $html}));
	});
	};

	app->start;

	__DATA__

	@@ index.html.ep

	<!DOCTYPE html>
	<html>
	<head>
	<title>People</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	</head>
	<body>
	<div>
	Name: <input type="text" id="name">
	Age: <input type="text" id="age" >
	<input type="submit" value="Add" onclick="insert()">
	</div>
	<br>
	Data: <br>
	<table border="1">
	<thead>
	<tr>
	<th>Name</th>
	<th>Age</th>
	</tr>
	</thead>
	<tbody id="table">
	%= include 'table'
	</tbody>
	</table>
	%= javascript begin
	function insert () {
	if (!("WebSocket" in window)) {
	alert('Your browser does not support WebSockets!');
	return;
	}
	var ws = new WebSocket("<%= url_for('insert')->to_abs %>");
	ws.onopen = function () {
	var name = $('#name');
	var age = $('#age');
	ws.send(JSON.stringify({name: name.val(), age: age.val()}));
	name.val('');
	age.val('');
	};
	ws.onmessage = function (evt) {
	var data = JSON.parse(evt.data);
	$('#table').append(data.row);
	};
	}
	% end
	</body>
	</html>

	@@ table.html.ep

	% foreach my $row ( @$rows ) {
	<tr>
	% foreach my $value (@{$row}{qw/name age/}) {
	<td><%= $value %></td>
	% }
	</tr>
	% }