## websocket.py

import socket
import struct
import hashlib,base64
import threading,random
#執行緒,套接字,雜湊表,隨機數

#存放連結客戶fd,元組
connectionlist = {}

#傳送指定的訊息
def sendMessage(message):
	#對全域性變數的引用
	global connectionlist
	#向客戶端集合中每個成員傳送訊息
	# %:字串合成
	# ,:字串疊加
	for connection in connectionlist.values():
		connection.send("\x00%s\xFF" % message)

#刪除連線,從集合中刪除連線物件item(建立一個連線追加到連線中)
def deleteconnection(item):
	global connectionlist
	del connectionlist['connection'+item]

#定義WebSocket物件(基於執行緒物件)
class WebSocket(threading.Thread):
	#
	def __init__(self,conn,index,name,remote, path="/"):
		#初始化執行緒
		threading.Thread.__init__(self)
		#初始化資料,全部儲存到自己的資料結構中self
		self.conn = conn
		self.index = index
		self.name = name
		self.remote = remote
		self.path = path
		self.buffer = ""
	
	#執行執行緒
	def run(self):
		#Log輸出,套接字index啟動
		print 'Socket%s Start!' % self.index
		headers = {}
		#Socket是否握手的標誌,初始化為false.
		self.handshaken = False
		#迴圈執行如下邏輯
		while True:
			#如果沒有進行握手
			if self.handshaken == False:
				#Log輸出,Socket x開始與遠端客戶y進行握手過程
				print 'Socket%s Start Handshaken with %s!' % (self.index,self.remote)
				#從客戶端接受1kb資料，存放到buffer中
				self.buffer += self.conn.recv(1024)
				#如果接受資料中有\r\n\r\n的標誌
				if self.buffer.find('\r\n\r\n') != -1:
					#按照這種標誌分割一次,結果為：header data(網頁的解析)
					#再對header 和 data部分進行單獨的解析
					header, data = self.buffer.split('\r\n\r\n', 1)
					#對header進行分割後，取出後面的n-1個部分
					for line in header.split("\r\n")[1:]:
						#逐行的解析Request Header資訊(Key,Value)
						key, value = line.split(": ", 1)
						#然後存放在一個Hash表中,方便訪問
						headers[key] = value
					#人為定義Location的item的資訊
					#構造location:ws://localhost/path ?
					headers["Location"] = "ws://%s%s" %(headers["Host"], self.path)
					print "Location:",headers["Location"]
					print "headers:",headers
					#取出其中兩項資訊key1 key2
					#key1 = headers["Sec-WebSocket-Key1"]
					
					#key2 = headers["Sec-WebSocket-Key2"]
					#Header解析完畢後，分析data部分
					#如果data部分長度小於8的話，從客戶端那邊接續接受資料使得data變為8位元組
					if len(data) < 8:
						data += self.conn.recv(8-len(data))
					#將data的資料資訊存放為key3變數(前面的第一個八個位元組為key3)
					#key3 = data[:8]
					#將data後面的資料作為buffer進行存放
					self.buffer = data[8:]
					#根據key1,key2,key3產生token？
					#根據客戶的key1、key2、8位元組的關鍵字
					#產生一個16位的安全祕鑰
					#old-Protocol
					#token = self.generate_token(key1, key2, key3)
					#new Protocol
					token = generate_token_2(self, key)
					#握手過程,伺服器構建握手的資訊,進行驗證和匹配
					#Upgrade: WebSocket 表示為一個特殊的http請求,請求目的為從http協議升級到websocket協議
					handshake = '\
					HTTP/1.1 101 Web Socket Protocol Handshake\r\n\
					Upgrade: WebSocket\r\n\
					Connection: Upgrade\r\n\
					Sec-WebSocket-Origin: %s\r\n\
					Sec-WebSocket-Location: %s\r\n\r\n\
					' %(headers['Origin'], headers['Location'])
					#服務端傳送握手資料 & 根據Key產生的Token值
					self.conn.send(handshake+token)
					#這個操作之後才設定為握手狀態
					self.handshaken = True
					#Log輸出狀態：套接字x與客戶y握手成功。
					print 'Socket%s Handshaken with %s success!' % (self.index,self.remote)
					#向全部連線客戶端集合傳送訊息,(環境套接字x的到來)
					sendMessage('Welcome, '+self.name+' !')
			else:
				#如果已經握手
				#從客戶端讀取64位元組的資料
				self.buffer += self.conn.recv(64)
				#如果資料中存在FF的標誌，則按照此標誌進行分解
				if self.buffer.find("\xFF")!=-1:
					#分解方式啥含義??
					s = self.buffer.split("\xFF")[0][1:]
					#如果訊息是'終止',則列印Socket退出
					if s=='quit':
						print 'Socket%s Logout!' % (self.index)
						#全體同志Socket退出的狀態(進行GUI更新準備)
						sendMessage(self.name+' Logout')
						#同時刪除socket連線集合
						deleteconnection(str(self.index))
						#同時關閉對應的WebSocket連線(多執行緒關係)
						self.conn.close()
						break
					else:
						#否則輸出,Socket x收到客戶端的訊息 y
						print 'Socket%s Got msg:%s from %s!' % (self.index,s,self.remote)
						#向全體的客戶端輸出連線的資訊
						sendMessage(self.name+':'+s)
					#Buffer資訊再一次的清空
					self.buffer = ""

def generate_token_2(self, key):
        key = key + '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
        ser_key = hashlib.sha1(key).digest()
        return base64.b64encode(ser_key)
        	
def generate_token(self, key1, key2, key3):
	#list/tuple(ls)-list元組相互轉換
	#這句話沒看懂,如何理解key是否為數字
	num1 = int("".join([digit for digit in list(key1) if digit.isdigit()]))
	#解析key1中空格的個數
	spaces1 = len([char for char in list(key1) if char == " "])
	#解析後number2物件
	num2 = int("".join([digit for digit in list(key2) if digit.isdigit()]))
	#統計空格的個數?安全性驗證
	spaces2 = len([char for char in list(key2) if char == " "])
	#按照一定的格式進行打包,然後進行網路傳輸(格式可以自己進行預訂)
	#struck.pack：http://blog.sina.com.cn/s/blog_4b5039210100f1tu.html
	combined = struct.pack(">II", num1/spaces1, num2/spaces2) + key3
	#對打包的值進行md5解碼後,並返回二進位制的形式
	##hexdigest() 為十六進位制值，digest()為二進位制值
	#處理MD5: http://wuqinzhong.blog.163.com/blog/static/4522231200942225810117/
	return hashlib.md5(combined).digest()
	
#建立WebSocket伺服器物件()
class WebSocketServer(object):
	#初始化時,socket為空
	def __init__(self):
		self.socket = None
	#開啟操作
	def begin(self):
		#伺服器盡心啟動Log輸出
		print 'WebSocketServer Start!'
		#建立TCP的套接字,監聽IP、Port
		#這裡可以自己進行設定,最多可以收聽50個請求客戶
		self.socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
		ip = 'localhost'
		port = 8080
		
		#print "WebServer is listening %s,%d" % ip,port
		#self.socket.bind(ip,port)
		self.socket.bind((ip,port))
		self.socket.listen(50)
		#宣告全域性連線集合
		global connectionlist
		
		i=0
		while True:
			#伺服器響應請求,返回連線客戶的資訊(連線fd,客戶地址)
			connection, address = self.socket.accept()
			#address資訊中的第1個字串為username物件
			username=address[0]
			#根據連線的客戶資訊,建立WebSocket物件(本質為一個執行緒)
			#連線後sockfd，連線index，使用者名稱，地址
			newSocket = WebSocket(connection,i,username,address)
			#執行緒啟動
			newSocket.start()
			#更新連線的集合(hash表的對應關係)-name->sockfd
			connectionlist['connection'+str(i)]=connection
			i = i + 1

if __name__ == "__main__":
	server = WebSocketServer()
	server.begin()
 

<html>
<head>
<title>WebSocket</title>

<style>
 html,body{font:normal 0.9em arial,helvetica;}
 #log {width:440px; height:200px; border:1px solid #7F9DB9; overflow:auto;}
 #msg {width:330px;}
</style>

<script>
var socket;

function init(){
  var host = "ws://127.0.0.1:8080/";
  try{
    socket = new WebSocket(host);
    socket.onopen    = function(msg){ ; };
    socket.onmessage = function(msg){ log(msg.data); };
    socket.onclose   = function(msg){ log("Lose Connection!"); };
  }
  catch(ex){ log(ex); }
  $("msg").focus();
}

function send(){
  var txt,msg;
  txt = $("msg");
  msg = txt.value;
  if(!msg){ alert("Message can not be empty"); return; }
  txt.value="";
  txt.focus();
  try{ socket.send(msg); } catch(ex){ log(ex); }
}

window.onbeforeunload=function(){
	try{ 
		socket.send('quit'); 
		socket.close();
		socket=null;
	}
	catch(ex){ 
		log(ex);
	}
};


function $(id){ return document.getElementById(id); }
function log(msg){ $("log").innerHTML+="<br>"+msg; }
function onkey(event){ if(event.keyCode==13){ send(); } }
</script>

</head>



<body onload="init()">
 <h3>WebSocket</h3>
 <br><br>
 <div id="log"></div>
 <input id="msg" type="textbox" onkeypress="onkey(event)"/>
 <button onclick="send()">傳送</button>
</body>

</html>
 

## 用法說明

websocket.py

訪問：http://localhost:8080/client.html