first commit

adam-singer · May 3, 2012 · ff9ca9d · ff9ca9d
commit ff9ca9d
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 0 deletions.
diff --git a/ChatClient/ChatClient.dart b/ChatClient/ChatClient.dart
@@ -0,0 +1,75 @@
+#import('dart:html');
+#import('dart:json');
+
+class ChatClient {
+  WebSocket ws;
+  bool isConnected = false;
+  InputElement _messageInput;
+  InputElement _nicknameInput;
+
+  ChatClient() {
+  }
+
+  // Send nickname to server
+  sendNick() {
+    var name = _nicknameInput.value;
+    ws.send(JSON.stringify({"cmd": "setnick", "args": name}));
+  }
+
+  // Server sets nickname
+  setNick(nick) {
+    _nicknameInput.value = nick;
+  }
+
+  // Send the server a message
+  sendMessage() {
+    String message = _messageInput.value;
+    if (!message.isEmpty()) {
+      ws.send(JSON.stringify({"cmd": "sendmessage", "args": message}));
+      _messageInput.value = "";
+    }
+  }
+
+  void run() {
+    _messageInput = document.query("#message");
+    _messageInput.on.keyPress.add((key) {
+      if (key.charCode == 13) { // Enter
+        sendMessage();
+      }      
+    });
+    _nicknameInput = document.query("#nickname");
+    _nicknameInput.on.keyPress.add((key) {
+      if (key.charCode == 13) { // Enter
+        sendNick();
+      }  
+    });
+
+    ws = new WebSocket("ws://127.0.0.1:8000/ws");
+    ws.on.open.add((a) {
+      print("open $a");
+      isConnected = true;
+    });
+
+    ws.on.close.add((c) {
+      print("close $c");
+      isConnected = false;
+    });
+
+    ws.on.message.add((m) {
+      var jdata = JSON.parse(m.data);
+      if (jdata["cmd"] == "serversetnick") {
+        setNick(jdata["args"]);
+      } else if (jdata["cmd"] == "newmessage") {
+        displayMessage(jdata["args"]);
+      }
+    });
+  }
+
+  void displayMessage(String message) {
+    document.query('#status').innerHTML = "${document.query('#status').innerHTML} <br/> $message";
+  }
+}
+
+void main() {
+  new ChatClient().run();
+}
diff --git a/ChatClient/ChatClient.html b/ChatClient/ChatClient.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Websocket Chat Client</title>
+
+	<style>
+	html {
+    	height: 100%;
+	}
+	body {
+	    height: 100%;
+	    margin: 2;   
+	    background-repeat: no-repeat;
+	    background: #cbccc8;
+	    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
+	}
+
+		.scroll {
+		border : solid 2px #ff0000; 
+		background : #000000; 
+		color : #ffffff; 
+		padding : 4px; 
+		width : 400px; 
+		height : 150px; 
+		overflow : auto; 
+		}
+		.inputchat {
+		border : solid 2px #ff0000; 
+		background : #000000; 
+		color : #ffffff; 
+		padding : 4px; 
+		width : 400px; 
+		height : 150px; 
+		overflow : auto; 
+		}
+		.inputname {
+		border : solid 2px #ff0000; 
+		background : #000000; 
+		color : #ffffff; 
+		}
+    </style>
+  </head>
+  <body>
+    <h1>Websocket Chat Client</h1>
+
+    <div class="scroll" id="status"></div>
+    <br/>
+    <div>name: <input class="inputname" type="text" name="nickname" id="nickname"/><br />
+		<textarea class="inputchat" type="text" name="message" id="message"></textarea><br />
+	</div>
+    <script type="application/dart" src="ChatClient.dart"></script>
+    <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
+  </body>
+</html>
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+Example Chat Client/Server with Websockets in Dart
+==================================================
+
+Super simple example of how to use websockets in dart on both client and server side. Sample provides a very simple chat server and client implementation. The server sets a default nickname on established connection which the client can then change. Entering the client nick and pressing `Enter` key will change it on the server and client. Entering in text into the bottom chat window and pressing `Enter` will send the text to all the clients connected. 
diff --git a/chatWebsocketDart.dart b/chatWebsocketDart.dart
@@ -0,0 +1,71 @@
+#import('dart:io');
+#import('dart:json');
+
+Map<String, ClientNick> connections;
+List chatText;
+
+class ClientNick {
+  int token;
+  String name;
+  WebSocketConnection conn;
+
+  ClientNick(this.name, this.token, this.conn) {
+    conn.send(JSON.stringify({"cmd":"serversetnick", "args":this.name}));
+    conn.onMessage = (message) {
+      print("message is $message");
+      var jdata = JSON.parse(message);
+      if (jdata["cmd"] == "setnick") { 
+        if (name == jdata["args"]) {
+          return;
+        }
+        var oldname = name;
+        name = jdata["args"]; 
+        print("setting nick $name");
+        connections.forEach((k,v) {
+          v.conn.send(JSON.stringify({"cmd":"newmessage", "args": '${oldname} has changed name to ${name}'}));
+        });
+        print(connections);
+      } else if (jdata["cmd"] == "sendmessage") {
+        chatText.add(jdata["args"]);
+        print("message: ${jdata["args"]}");
+        connections.forEach((k,v) {
+          v.conn.send(JSON.stringify({"cmd":"newmessage", "args": '${name} : ${jdata["args"]}'}));
+        });
+      }
+    };
+
+    conn.onClosed = (int status, String reason) {
+      print('closed with $status for $reason');
+      connections.remove(token.toString());
+    };
+
+    conn.onError = (e) {
+      print('Error was $e');
+      connections.remove(token.toString());
+    };
+  }
+
+  String toString() {
+    return "${name}_${token}";
+  }
+}
+
+void main() {
+  chatText = [];
+  int token = 0;
+  connections = new Map();
+
+  HttpServer server = new HttpServer();
+  WebSocketHandler wsHandler = new WebSocketHandler();
+  server.addRequestHandler((req) => req.path == "/ws", wsHandler.onRequest);
+
+  wsHandler.onOpen = (WebSocketConnection conn) {
+    token+=1;
+    var c = new ClientNick("new_nick_${token}", token, conn);
+    print("adding connection token = ${token}");
+    connections[token.toString()] = c;
+  };
+
+  print('listing on localhost');
+  server.listen('127.0.0.1', 8000);
+}