Support for subprotocols via Sec-WebSocket-Protocol header

RELEASE

@@ -1,7 +1,11 @@
 
+ver 0.1.4 (2015-10-07)
+======================
+Add Sec-WebSocket-Protocol header
+
 ver 0.1.3 (2014-09-13)
 ======================
-Support Chorome manifest version 2.
+Support Chrome manifest version 2.
 
 ver 0.1.2 (2010-10-25)
 ======================
@@ -10,4 +14,3 @@ Improve UX.
 ver 0.1.1 (2010-10-18)
 ======================
 First release.
-

css/style.css

@@ -1,6 +1,6 @@
 body {
 	width: 100%;
-	font-family: font-family:'�q���M�m�p�S Pro W3','Hiragino Kaku Gothic Pro','���C���I',Meiryo,'�l�r �o�S�V�b�N',sans-serif;
+	font-family: font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
 	color: #000;
 	background-color: #eee;
 	font-size: 10pt;
@@ -38,6 +38,12 @@ label {
 	border: 1px solid #999;
 }
 
+#protocolHeader {
+	width: 113px;
+	padding: 1px 3px;
+	border: 1px solid #999;
+}
+
 #disconnectButton {
 	display: none;
 }
@@ -66,4 +72,4 @@ label {
 
 #messages pre.sent {
 	color: #f63;
-}
+}

index.html

@@ -16,6 +16,9 @@
 			<button id="connectButton">Open</button>
 			<button id="disconnectButton">Close</button>
 		</div>
+		<div>
+			<label>Sec-WebSocket-Protocol:</label>
+			<input type="text" id="protocolHeader" />
 		<div>
 			<label>Status:</label>
 			<span id="connectionStatus">CLOSED</span>
@@ -39,4 +42,4 @@
 <script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
 <script type="text/javascript" src="index.js"></script>
 </body>
-</html>
+</html>

index.js

@@ -3,27 +3,40 @@ new function() {
 	var connected = false;
 
 	var serverUrl;
+	var protocolHeader;
 	var connectionStatus;
 	var sendMessage;
-	
+
 	var connectButton;
-	var disconnectButton; 
+	var disconnectButton;
 	var sendButton;
 
 	var open = function() {
 		var url = serverUrl.val();
-		ws = new WebSocket(url);
+		var protocol = protocolHeader.val();
+		if (protocol) {
+			// comma-separated protocol headers are passed as array
+			var protocols = protocol.replace(/\s/,'').split(',');
+			try {
+				ws = new WebSocket(url, protocols);
+			} catch (ex) {
+				alert(ex);
+			}
+		} else {
+			ws = new WebSocket(url);
+		}
 		ws.onopen = onOpen;
 		ws.onclose = onClose;
 		ws.onmessage = onMessage;
 		ws.onerror = onError;
 
 		connectionStatus.text('OPENING ...');
 		serverUrl.attr('disabled', 'disabled');
+		protocolHeader.attr('disabled', 'disabled');
 		connectButton.hide();
 		disconnectButton.show();
 	}
-	
+
 	var close = function() {
 		if (ws) {
 			console.log('CLOSING ...');
@@ -33,46 +46,50 @@ new function() {
 		connectionStatus.text('CLOSED');
 
 		serverUrl.removeAttr('disabled');
+		protocolHeader.removeAttr('disabled');
 		connectButton.show();
 		disconnectButton.hide();
 		sendMessage.attr('disabled', 'disabled');
 		sendButton.attr('disabled', 'disabled');
 	}
-	
+
 	var clearLog = function() {
 		$('#messages').html('');
 	}
-	
-	var onOpen = function() {
+
+	var onOpen = function(evt) {
 		console.log('OPENED: ' + serverUrl.val());
+		if (evt.currentTarget.protocol) {
+			console.log('Sec-WebSocket-Protocol: ' + evt.currentTarget.protocol);
+		}
 		connected = true;
 		connectionStatus.text('OPENED');
 		sendMessage.removeAttr('disabled');
 		sendButton.removeAttr('disabled');
 	};
-	
+
 	var onClose = function() {
 		console.log('CLOSED: ' + serverUrl.val());
 		ws = null;
 	};
-	
+
 	var onMessage = function(event) {
 		var data = event.data;
 		addMessage(data);
 	};
-	
+
 	var onError = function(event) {
 		alert(event.data);
 	}
-	
+
 	var addMessage = function(data, type) {
 		var msg = $('<pre>').text(data);
 		if (type === 'SENT') {
 			msg.addClass('sent');
 		}
 		var messages = $('#messages');
 		messages.append(msg);
-		
+
 		var msgBox = messages.get(0);
 		while (msgBox.childNodes.length > 1000) {
 			msgBox.removeChild(msgBox.firstChild);
@@ -83,32 +100,33 @@ new function() {
 	WebSocketClient = {
 		init: function() {
 			serverUrl = $('#serverUrl');
+			protocolHeader = $('#protocolHeader');
 			connectionStatus = $('#connectionStatus');
 			sendMessage = $('#sendMessage');
-			
+
 			connectButton = $('#connectButton');
-			disconnectButton = $('#disconnectButton'); 
+			disconnectButton = $('#disconnectButton');
 			sendButton = $('#sendButton');
-			
+
 			connectButton.click(function(e) {
 				close();
 				open();
 			});
-		
+
 			disconnectButton.click(function(e) {
 				close();
 			});
-			
+
 			sendButton.click(function(e) {
 				var msg = $('#sendMessage').val();
 				addMessage(msg, 'SENT');
 				ws.send(msg);
 			});
-			
+
 			$('#clearMessage').click(function(e) {
 				clearLog();
 			});
-			
+
 			var isCtrl;
 			sendMessage.keyup(function (e) {
 				if(e.which == 17) isCtrl=false;
@@ -125,4 +143,4 @@ new function() {
 
 $(function() {
 	WebSocketClient.init();
-});
+});

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Simple WebSocket Client",
   "manifest_version": 2,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Construct custom Web Socket requests and handle responses to directly test your Web Socket services.",
   "icons": {
     "16":  "resources/icon_032.png",