Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Updates to examples: package.json; CSS; JS. #179

Merged
merged 4 commits into from

2 participants

@mrienstra

The express_example example was already working, but I made some "improvements":

  1. Added a package.json, to make it as easy as typing npm install --> node app.js to get the example running.

  2. The styling of elements was a little funky, particularly in Chrome. I cleaned it up a little.

  3. I improved the client-side JS a bit. The text input automatically gets focus at the beginning, & you can use the enter key instead of having to click the button every time.

Hmm, tempting to go back and add a readme.md or some comments to the source...

Update 1: I made some similar changes to helloworld_example (no CSS changes, just package.json & client-side JS).

Update 2: I made some similar changes to multiroomchat_example (no CSS changes, just package.json & client-side JS -- also added a count of the number of others in the room).

Update 3: Made more changes to multiroomchat_example. Now retrieving room count in a better way (using Group count method instead of counting the Group users property). Added notification of leaving and entering -- though this is a bit crude, may be better to leave it out, rather than show it being done somewhat poorly.

mrienstra added some commits
@mrienstra mrienstra Updates to examples/express_example: Added package.json; Improved sty…
…ling; Improved JS.
f782ebf
@mrienstra mrienstra Updates to examples/helloworld_example: Added package.json; Improved JS. ec78b9e
@mrienstra mrienstra Updates to examples/multiroomchat_example: Added package.json; Added …
…count of others in room; Improved JS.
35da8b9
@mrienstra mrienstra Retrieving room count in a better way (using Group count method inste…
…ad of counting the Group users property). Added notification of leaving and entering -- though this is a bit crude, may be better to leave it out, rather than show it being done somewhat poorly.
424243d
@steveWang steveWang merged commit 1629218 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 17, 2012
  1. @mrienstra
  2. @mrienstra
  3. @mrienstra

    Updates to examples/multiroomchat_example: Added package.json; Added …

    mrienstra authored
    …count of others in room; Improved JS.
Commits on Feb 20, 2012
  1. @mrienstra

    Retrieving room count in a better way (using Group count method inste…

    mrienstra authored
    …ad of counting the Group users property). Added notification of leaving and entering -- though this is a bit crude, may be better to leave it out, rather than show it being done somewhat poorly.
This page is out of date. Refresh to see the latest.
View
19 examples/express_example/package.json
@@ -0,0 +1,19 @@
+{
+ "name": "nowjs-express-example",
+ "version": "0.0.2",
+ "author": "ericz (Eric Zhang) <eric@nowjs.com>",
+ "description": "This is an example of an embedded chat window added to any site.",
+ "keywords": [
+ "nowjs",
+ "express",
+ "example"
+ ],
+ "dependencies" : {
+ "now" : ">=0.7",
+ "express" : ">=2.4",
+ "ejs" : ">=0.5"
+ },
+ "engine": {
+ "node": ">=0.4"
+ }
+}
View
35 examples/express_example/views/chat.ejs
@@ -6,19 +6,28 @@
</div>
<script>
- $(document).ready(function(){
-
- now.receiveMessage = function(name, message){
- $("#messages").append("<br>" + name + ": " + message);
+ $(document).ready(function(){
+
+ now.receiveMessage = function(name, message){
+ $("#messages").append("<br>" + name + ": " + message);
+ }
+
+ $("#send-button").click(function(){
+ now.distributeMessage($("#text-input").val());
+ $("#text-input").val("");
+ $("#text-input").focus();
+ });
+
+ $("#text-input").keypress(function (e) {
+ if (e.which && e.which === 13) {
+ $("#send-button").click();
+ return false;
}
-
- $("#send-button").click(function(){
- now.distributeMessage($("#text-input").val());
- $("#text-input").val("");
- $("#text-input").focus();
- });
-
- now.name = prompt("What's your name?", "");
-
});
+
+ now.name = prompt("What's your name?", "");
+
+ $("#text-input").focus();
+
+ });
</script>
View
11 examples/express_example/views/index.ejs
@@ -1,13 +1,12 @@
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<p>This is an example of an embedded chat window added to any site. <a href='#' id='chat'>Chat with us</a></p>
-<div id="floater" style="position: absolute; right: 0; top:0; width="25%" height="100%"></div>
+<div id="floater" style="position: absolute; right: 0; top:0; width: 300px; height: 100%;"></div>
<script>
- $(document).ready(function() {
+ $(document).ready(function() {
$('#chat').click(function(e) {
- e.preventDefault();
- $('<iframe width="300px" height="100%" sandbox="allow-same-origin allow-forms allow-scripts" src="http://localhost:8080/chat"></iframe>').appendTo('#floater');
- });
-
+ e.preventDefault();
+ $('#floater').css("border-left", "1px solid #000").append('<iframe style="width: 300px; border: 0;" sandbox="allow-same-origin allow-forms allow-scripts" src="http://localhost:8080/chat"></iframe>');
});
+ });
</script>
View
11 examples/helloworld_example/helloworld.html
@@ -16,9 +16,16 @@
$("#text-input").val("");
});
-
+ $("#text-input").keypress(function (e) {
+ if (e.which && e.which === 13) {
+ $("#send-button").click();
+ return false;
+ }
+ });
+
now.name = prompt("What's your name?", "");
-
+
+ $("#text-input").focus();
});
</script>
</head>
View
16 examples/helloworld_example/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "nowjs-helloworld-example",
+ "version": "0.0.6",
+ "author": "ericz (Eric Zhang) <eric@nowjs.com>",
+ "description": "'Hello world' example for NowJS.",
+ "keywords": [
+ "nowjs",
+ "example"
+ ],
+ "dependencies" : {
+ "now" : ">=0.7"
+ },
+ "engine": {
+ "node": ">=0.4"
+ }
+}
View
16 examples/multiroomchat_example/multiroomchat.html
@@ -8,20 +8,28 @@
<script>
$(document).ready(function(){
now.receiveMessage = function(name, message){
- $("#messages").append("<br>" + name + ": " + message);
+ $("#messages").append("<br><b>" + name + "</b>: " + message);
}
$("#send-button").click(function(){
now.distributeMessage($("#text-input").val());
$("#text-input").val("");
});
-
+
$(".change").click(function(){
now.changeRoom($(this).text());
});
-
+
+ $("#text-input").keypress(function (e) {
+ if (e.which && e.which === 13) {
+ $("#send-button").click();
+ return false;
+ }
+ });
+
now.name = prompt("What's your name?", "");
-
+
+ $("#text-input").focus();
});
</script>
</head>
View
8 examples/multiroomchat_example/multiroomchat_server.js
@@ -25,10 +25,16 @@ nowjs.on('disconnect', function(){
});
everyone.now.changeRoom = function(newRoom){
+ this.now.distributeMessage("[leaving " + this.now.room + "]");
nowjs.getGroup(this.now.room).removeUser(this.user.clientId);
nowjs.getGroup(newRoom).addUser(this.user.clientId);
this.now.room = newRoom;
- this.now.receiveMessage("SERVER", "You're now in " + this.now.room);
+ this.now.distributeMessage("[entering " + this.now.room + "]");
+ var that = this;
+ nowjs.getGroup(this.now.room).count(function(count){
+ var prettyCount = (count === 1) ? "Room is empty." : (count - 1) + " other(s) in room.";
+ that.now.receiveMessage("SERVER", "You're now in " + that.now.room + ". " + prettyCount);
+ });
}
everyone.now.distributeMessage = function(message){
View
16 examples/multiroomchat_example/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "nowjs-helloworld-example",
+ "version": "0.0.6",
+ "author": "ericz (Eric Zhang) <eric@nowjs.com>",
+ "description": "'Hello world' example for NowJS.",
+ "keywords": [
+ "nowjs",
+ "example"
+ ],
+ "dependencies" : {
+ "now" : ">=0.7"
+ },
+ "engine": {
+ "node": ">=0.4"
+ }
+}
Something went wrong with that request. Please try again.