webchat
/
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="static/css/bootstrap.min.css" />
<script src="static/js/jquery-1.11.2.js"></script>
<script src="static/js/bootstrap.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
	console.log('ready')
	setTimeout(getonline,100);
	room_clicked = false;
	$('#5216').click(function () {
		if (room_clicked) {
			return　0;
		}
		room_clicked = true;
		document.cookie = "room_id=5216"
		host = "ws://localhost:8088/room_socket";
		chat_host = "ws://localhost:8088/chat_socket";
		chat_socket = new WebSocket(chat_host);
		$('#selected_room').html("<h3>5216</h3>");
		var room_socket = new WebSocket(host);
		chat_socket.onopen = function (event) {
			chat_socket.send(getCookie('user')+" enter the room");
		}
		chat_socket.onclose = function (event) {

		}
		chat_socket.onmessage = function (event) {
			$(document).scrollTop($(document).height()-$(window).height());
			var info = $.parseJSON($.parseJSON(event.data))
			console.log(info);
			if (info.user==getCookie('user')) {
				$('#chat_pannel').append("<div class='alert alert-info' role='alert'><p align='right'>"+info.info+"</p></div>");
			}else {
				$('#chat_pannel').append("<div class='alert alert-warning alert-dismissible' role='alert'><p align='left'><strong>"+info.user+": </strong>"+info.info+"</p></div>");
			}
		}
		room_socket.onopen = function (event) {
		}
		room_socket.onmessage = function (event) {
			console.log($.parseJSON(event.data));
			var arr = $.parseJSON(event.data);
			$('#5216').empty();
			$('#5216').html("<p id='5216_p' class='list-group-item' >5216</p>");
			for(var i = 0; i<arr.length; i++){
				$('#5216_p').append("<li class='list-group-item'>"+arr[i]+"</li>");
			}
		}
		$('#say').click(function () {
			chat_socket.send($('#chat_input').val());
			$('#chat_input').val('');

		});
		$('#show').click(function () {
			chat_socket.send('<video id="video" controls="controls">your bower not content</video>');
			navigator.getUserMedia || (navigator.getUserMedia = navigator.mozGetUserMedia ||  navigator.webkitGetUserMedia || navigator.msGetUserMedia);

			if (navigator.getUserMedia) {
    		//do something
			} else {
    		console.log('your browser not support getUserMedia');
			}
			navigator.getUserMedia({
        	video: true,
        	audio: true
    		}, onSuccess, onError);
    		function onSuccess(stream) {
    		console.log(stream);

    		chat_socket.send(stream);
    		chat_socket.onmessage = function (event) {
    			$('#video').attr('src',$.parseJSON($.parseJSON(event.data)).info);
    		}
    		//if (window.URL) {
            //$('#video').attr('src',window.URL.createObjectURL(stream));
        	//} else {
            //$('#video').attr('src',stream);
        //	}
    		}
    		function onError() {}
			var myVideo=document.getElementById("video");
			myVideo.play();
			})
	})
})


function getonline() {
	host = "ws://localhost:8088/login_socket";
	var get_socket = new WebSocket(host);
	get_socket.onopen = function (event) {
		get_socket.send('hello')
	}
	get_socket.onmessage = function (event) {
		console.log(event.data);
		$("#online").html("当前在线"+"<strong>"+event.data+"</strong>"+"人" );
   }
   get_socket.onclose = function (evt) {
   	document.cookie = "user=;room_id=5216";
	}
}
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    }
  }
return ""
}
</script>
<style type="text/css">
body { padding-top: 150px; }
body { padding-bottom: 70px; }
</style>
<title>欢迎来到聊天室：{{user}}</title>
</head>
<body style="background-color:#999">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<nav class="navbar navbar-default navbar-fixed-top">
  					<div class="container-fluid">
  					<form class="navbar-form navbar-left" role="Search">
  						<h1>WebChat</h1>
  						<label id="online">当前在线default人　　　　　     　</label>
  						<div class="form-group">
      					<input type="text" class="form-control" placeholder="Search"　>
    					</div>
						<button type="submit" class="btn btn-default">Search</button>
  					</form>
  					</div>
				</nav>
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-3">
				<ul class="nav nav-pills nav-stacked affix">
  					<li class="list-group-item" id="rooms">聊天房间</li>
						<div id="5216">
						<a class="list-group-item" id="5216_a">5216</a>
						</div>
				</ul>
			</div>
			<div class="col-md-9">
				<div class="panel panel-default" width="200px" height="200px">
					<div class="panel-heading">
						<h3 class="panel-title" name="selected_room" id="selected_room">
						default
						<h3>
					</div>
					<div id="chat_pannel">
						<div class="alert alert-warning alert-dismissible" role="alert">
  							<strong>Admin:</strong> nice to meet you
						</div>
					</div>

  					<div class="panel-footer">
  					</div>
				</div>
			</div>
		</div>
	</div>
	<nav class="navbar navbar-default navbar-fixed-bottom">
  		<div class="container">
    		<div class="input-group">
  						<input  type="text" class="form-control" name="chat_input" id="chat_input">
  						<span class="input-group-btn">
  							<button class="btn btn-default" name="say" id="say">say</button>
  							<button class="btn btn-default" name="show" id="show">show</button>
  						</span>
  					</div>
  		</div>
</nav>
</body>

</html>