基於html5 WebSocket和WebRTC實現IM和視音頻呼叫（二）

本文轉載自查看原文 2012-02-26 16:13 6830 html5/ 原創/ WebSocket/ WebRTC

在上篇文（基於html5 WebSocket和WebRTC實現IM和視音頻呼叫（一））里我們已經用Jetty-7.5.4.v20111024搭起了一個WebSocket server，現在就可以編寫自己的WebSocket Server邏輯完成自己的實現了。

一、編寫WebSocket服務端邏輯

MyWebSocketServlet類繼承自Jetty開發包中的org.eclipse.jetty.websocket.WebSocketServlet類，用於實現我們的WebSocket 服務端入口。前期沒有編寫太多的服務端邏輯，只是實現了接受並記錄所有連接client端，並廣播所有client端消息的功能，代碼如下：

MyWebSocketServlet.javapackage com.webrtcserver;

import java.io.IOException;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.eclipse.jetty.websocket.WebSocket;
import org.eclipse.jetty.websocket.WebSocketServlet;

public class MyWebSocketServlet extends WebSocketServlet {
	private static final long serialVersionUID = -7289719281366784056L;
	public static String newLine = System.getProperty("line.separator");

	private final Set<TailorSocket> _members = new CopyOnWriteArraySet<TailorSocket>();

	public void init() throws ServletException {
		super.init();

	}

	private void broadcastMessage(String msg) {
		for (TailorSocket member : _members) {
			logs("Trying to send to Member!");
			if (member.isOpen()) {
				logs("Sending!");
				try {
					member.sendMessage(msg);
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
		}
	}

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		getServletContext().getNamedDispatcher("default").forward(request,
				response);
		logs("doGet");
	}

	public WebSocket doWebSocketConnect(HttpServletRequest request,
			String protocol) {
		return new TailorSocket();
	}
	static private int serialNum = 0;
	class TailorSocket implements WebSocket.OnTextMessage {
		private Connection _connection;
		private String sdp;
		private String userName;

		public void onClose(int closeCode, String message) {
			_members.remove(this);
		}

		public void sendMessage(String data) throws IOException {
			_connection.sendMessage(data);
		}

		public void onMessage(String data) {
			logs("Received: " + data);
			broadcastMessage(data);
		}

		public boolean isOpen() {
			return _connection.isOpen();
		}

		public void onOpen(Connection connection) {
			userName = String.format("%5d", serialNum++);
			_members.add(this);
			_connection = connection;
			logs("one memner connected!");
			try {
				connection
						.sendMessage("onOpen:Server received Web Socket upgrade and added it to Receiver List.");
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
	
	private void logs(String logMessage) {
		System.out.println(logMessage);
	}
}

TailorSocket 繼承自 WebSocket.OnTextMessage，每當一個client連接時就會調用doWebSocketConnect方法實例化一個client對象。

server端通過TailorSocket的_connection.sendMessage(data)方法向client發送文本消息；通過onMessage接收client發送的文本消息，並調用broadcastMessage方法向所有連接的client廣播消息。

二、編寫Client邏輯

WebSocket對象在不同的瀏覽器實現稍有區別，為了代碼適應更多的瀏覽器在調用WebSocket對象前需要判斷當前的瀏覽器，然后實現WebSocket的onopen,onmessage,onclose等方法，即可與WebSocket服務端建立連接，具體代碼如下：

var server = {
	connect : function() {
		var location = get_appropriate_ws_url() + "/servlet/a";
		if (BrowserDetect.browser == "Firefox") {
			this._ws = new MozWebSocket(location, null);
		} else {
			this._ws = new WebSocket(location, null);
		}
		this._ws.onopen = this._onopen;
		this._ws.onmessage = this._onmessage;
		this._ws.onclose = this._onclose;
		showLog("connecting...");
	},

	_onopen : function() {
		showLog("connected to server!");
	},

	_send : function(message) {
		if (this._ws)
			this._ws.send(message);
	},

	send : function(text) {
		if (text != null && text.length > 0) {
			server._send(text);
		}
	},

	_onmessage : function(m) {
		if (m.data) {
			showMessage("others", m.data);
		}
		showLog("onmessage");
	},

	_onclose : function(m) {
		this._ws = null;
		showLog("onclose");
	}
};

下面的test.html和test.js簡單實現了群聊聊天室:

test.html<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset = "utf-8"/>
        <title>WebRTC && Web Sockets Demo</title>
        <script type="text/javascript" src="JS/test.js"></script>
        <style type='text/css'>
            div {
                border: 0px solid black;
            }

            div#messageBox {
                clear: both;
                width: 40em;
                height: 20ex;
                overflow: auto;
                background-color: #f0f0f0;
                padding: 4px;
                border: 1px solid black;
            }
            
            div#logBox {
                clear: both;
                width: 40em;
                height: 20ex;
                overflow: auto;
                background-color: #f0f0f0;
                padding: 4px;
                border: 1px solid black;
            }

            div#input {
                clear: both;
                width: 40em;
                padding: 4px;
                background-color: #e0e0e0;
                border: 1px solid black;
                border-top: 0px
            }

            div.hidden {
                display: none;
            }

            span.alert {
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <div>
           <input id='connect' class='button' type='submit' name='Connect'  value='Connect' />
        </div>
        <div id='messageBox'></div>
        <div id='inputButton'>
            <input id="inputBox" type="text"/>
            <input id="inputButton" type="button" value="SEND"/>
        </div>
        <div id='logBox'></div>
        <script type='text/javascript'>
            $('connect').onclick =function(event) {
                server.connect();
                return false;
            };
            $("inputButton").onclick = function(event) {
                if($("inputBox").value != "") {
                    server.send($("inputBox").value);
                    $("inputBox").value = "";
                    showMessage("me", text);
                }
                return false;
            }
        </script>
     </body>
</html>

test.jsif (!window.WebSocket)
	alert("window.WebSocket unsuport!");

function $() {
	return document.getElementById(arguments[0]);
}
function $F() {
	return document.getElementById(arguments[0]).value;
}

function getKeyCode(ev) {
	if (window.event) return window.event.keyCode;
	return ev.keyCode;
}

function showMessage(from, content) {
	var messageBox = $('messageBox');
	var spanText = document.createElement('span');
	spanText.className = 'text';
	spanText.innerHTML = from + ":" + content;
	var lineBreak = document.createElement('br');
	messageBox.appendChild(spanText);
	messageBox.appendChild(lineBreak);
	messageBox.scrollTop = messageBox.scrollHeight - messageBox.clientHeight;
}

function showLog(log) {
	var logBox = $("logBox");
	logBox.innerHTML = log + "<br />" + logBox.innerHTML;
}

function get_appropriate_ws_url()
{
	var pcol;
	var u = document.URL;
	if (u.substring(0, 5) == "https") { pcol = "wss://";
		u = u.substr(8);
	} else {
		pcol = "ws://";
		if (u.substring(0, 4) == "http") u = u.substr(7);
	}
	u = u.split('/');
	return pcol + u[0];
}

var server = {
	connect : function() { var location = get_appropriate_ws_url() + "/servlet/a";
		if (BrowserDetect.browser == "Firefox") { this._ws = new MozWebSocket(location, "dumb-increment-protocol");
		} else {
			this._ws = new WebSocket(location, "dumb-increment-protocol");
		}
		this._ws.onopen = this._onopen;
		this._ws.onmessage = this._onmessage;
		this._ws.onclose = this._onclose;
		showLog("connecting...");
	},

	_onopen : function() {
		showLog("connected to server!");
	},

	_send : function(message) {
		if (this._ws) this._ws.send(message);
	},

	send : function(text) {
		if (text != null && text.length > 0) { server._send(text);
		}
	},

	_onmessage : function(m) {
		showMessage("others", m.data);
		showLog("onmessage");
	},

	_onclose : function(m) {
		this._ws = null;
		showLog("onclose");
	}
};
/* BrowserDetect came from http://www.quirksmode.org/js/detect.html */

var BrowserDetect = {
	init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++) { var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) { if (dataString.indexOf(data[i].subString) != -1) return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent, subString: "Chrome", identity: "Chrome" }, { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb" }, { string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" }, { prop: window.opera, identity: "Opera", versionSearch: "Version" }, { string: navigator.vendor, subString: "iCab", identity: "iCab" }, { string: navigator.vendor, subString: "KDE", identity: "Konqueror" }, { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" }, { string: navigator.vendor, subString: "Camino", identity: "Camino" }, { // for newer Netscapes (6+) string: navigator.userAgent, subString: "Netscape", identity: "Netscape" }, { string: navigator.userAgent, subString: "MSIE", identity: "Explorer", versionSearch: "MSIE" }, { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla", versionSearch: "rv" }, { // for older Netscapes (4-) string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla" } ], dataOS : [ { string: navigator.platform, subString: "Win", identity: "Windows" }, { string: navigator.platform, subString: "Mac", identity: "Mac" }, { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" }, { string: navigator.platform, subString: "Linux", identity: "Linux" } ] };
BrowserDetect.init();

test2.html則用html5的canvas實現了電子白板的功能：

test2.html<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset=utf-8 />
 <title>Minimal Websocket test app</title>
</head>

<body>

<table>
	<tr>
		<td>Drawing color:
		<select id="color" onchange="update_color();">
			<option value=#000000>Black</option>
			<option value=#0000ff>Blue</option>
			<option value=#20ff20>Green</option>
			<option value=#802020>Dark Red</option>
		</select>
		</td>
		<td id=wslm_statustd align=center><div id=wslm_status>Not initialized</div></td>
	</tr>
	<tr>
		<td colspan=2 width=500 align=center style="background-color: #e0e0e0;"><div id=wslm_drawing> </div></td>
	</tr>
</table>

<script>
/* BrowserDetect came from http://www.quirksmode.org/js/detect.html */
var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera",
			versionSearch: "Version"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();

	var pos = 0;

function get_appropriate_ws_url()
{
	var pcol;
	var u = document.URL;

	/* * We open the websocket encrypted if this page came on an * https:// url itself, otherwise unencrypted */

	if (u.substring(0, 5) == "https") {
		pcol = "wss://";
		u = u.substr(8);
	} else {
		pcol = "ws://";
		if (u.substring(0, 4) == "http")
			u = u.substr(7);
	}

	u = u.split('/');

	return pcol + u[0];
}


/* lws-mirror protocol */

	var down = 0;
	var no_last = 1;
	var last_x = 0, last_y = 0;
	var ctx;
	var socket_lm;
	var color = "#000000";

	if (BrowserDetect.browser == "Firefox") {
		socket_lm = new MozWebSocket(get_appropriate_ws_url() + "/servlet/a",
				   "lws-mirror-protocol");
	} else {
		socket_lm = new WebSocket(get_appropriate_ws_url() + "/servlet/a",
				   "lws-mirror-protocol");
	}


	try {
		socket_lm.onopen = function() {
			document.getElementById("wslm_statustd").style.backgroundColor = "#40ff40";
			document.getElementById("wslm_status").textContent = " websocket connection opened ";
		} 

		socket_lm.onmessage =function got_packet(msg) {
			j = msg.data.split(';');
			f = 0;
			while (f < j.length - 1) {
				i = j[f].split(' ');
				if (i[0] == 'd') {
					ctx.strokeStyle = i[1];
					ctx.beginPath();
					ctx.moveTo(+(i[2]), +(i[3]));
					ctx.lineTo(+(i[4]), +(i[5]));
					ctx.stroke();
				}
				if (i[0] == 'c') {
					ctx.strokeStyle = i[1];
					ctx.beginPath();
					ctx.arc(+(i[2]), +(i[3]), +(i[4]), 0, Math.PI*2, true); 
					ctx.stroke();
				}

				f++;
			}
		}

		socket_lm.onclose = function(){
			document.getElementById("wslm_statustd").style.backgroundColor = "#ff4040";
			document.getElementById("wslm_status").textContent = " websocket connection CLOSED ";
		}
	} catch(exception) {
		alert('<p>Error' + exception);  
	}

	var canvas = document.createElement('canvas');
	canvas.height = 300;
	canvas.width = 480;
	ctx = canvas.getContext("2d");

	document.getElementById('wslm_drawing').appendChild(canvas);

	canvas.addEventListener('mousemove', ev_mousemove, false);
	canvas.addEventListener('mousedown', ev_mousedown, false);
	canvas.addEventListener('mouseup', ev_mouseup, false);

	offsetX = offsetY = 0;
	element = canvas;
      if (element.offsetParent) {
        do {
          offsetX += element.offsetLeft;
          offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
      }
 
function update_color() {
	color = document.getElementById("color").value;
}

function ev_mousedown (ev) {
	down = 1;
}

function ev_mouseup(ev) {
	down = 0;
	no_last = 1;
}

function ev_mousemove (ev) {
	var x, y;

	if (ev.offsetX) {
		x = ev.offsetX;
		y = ev.offsetY;
	} else {
		x = ev.layerX - offsetX;
		y = ev.layerY - offsetY;

	}

	if (!down)
		return;
	if (no_last) {
		no_last = 0;
		last_x = x;
		last_y = y;
		return;
	}
	socket_lm.send("d " + color + "" + last_x + "" + last_y + "" + x + ' ' + y + ';');

	last_x = x;
	last_y = y;
}
</script>
</body>
</html>

http://dev.w3.org/html5/websockets/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 基於html5 WebSocket和WebRTC實現IM和視音頻呼叫（一） Html5 + Websocket 實現的Web聊天（可群聊） Java后端WebSocket的Tomcat實現 html5 WebSocket 實時聊天 HTML5新特性之WebRTC HTML5 WebSocket 【轉】HTML5的WebSocket HTML5之webSocket使用 HTML5 WebSocket之HelloWorld HTML5 WebSocket HTML5中的WebSocket