上一篇博文簡單介紹了websocket通訊協議，本文將應用websocket以及Python多執行緒網路程式設計實現一個簡單的網頁版實時線上聊天小系統，先來張圖輕鬆一下

本應用開發環境

windows7 x86_64
JetBrains PyCharm Community Edition 2017.2.2 x64
python3.5
Google Chrome瀏覽器

測試執行環境

server端執行在windows PyCharm中
client端執行在rhel7.2 Apache服務中

開發語言涉及

Python、JavaScript（以及jQuery庫）、HTML、CSS
 

應用核心實現

Python套接字、Python多執行緒、websocket通訊協議應用、前端三劍客

功能實現

使用者自注冊、登入、搜尋並新增好友、加入群聊、建立群組、點對點聊天、群組聊天、退出等

服務端實現

# coding=utf-8
'''
file:websockt-server.py
date:2017/10/2 20:48
author:lockey
email:[email protected]
desc:
'''
import socket,json
import hashlib
import threading
from base64 import b64encode

#使用者資訊儲存字典
 

users={}
#群組資訊儲存字典
groups={}

#判斷是否設定了掩碼
def is_bit_set(int_type, offset):
    mask = 1 << offset
    return not 0 == (int_type & mask)
#設定掩碼
def set_bit(int_type, offset):
    return int_type | (1 << offset)

def bytes_to_int(data):
    # note big-endian is the standard network byte order
 

    return int.from_bytes(data, byteorder='big')
#傳送資料的封裝，不完整實現
def pack(data):
    """pack bytes for sending to client"""
    frame_head = bytearray(2)
    # set final fragment
    frame_head[0] = set_bit(frame_head[0], 7)
    # set opcode 1 = text
    frame_head[0] = set_bit(frame_head[0], 0)
    # payload length
    assert len(data) < 126, "haven't implemented that yet"
    frame_head[1] = len(data)
        # add data
    frame = frame_head + data.encode('utf-8')
    return frame

#接收資料的轉換
def parse_recv_data(msg):
    en_bytes = b''
    cn_bytes = []
    if len(msg) < 6:
        return ''
    v = msg[1] & 0x7f
    if v == 0x7e:
        p = 4
    elif v == 0x7f:
        p = 10
    else:
        p = 2
    mask = msg[p:p + 4]
    data = msg[p + 4:]

    for k, v in enumerate(data):
        nv = chr(v ^ mask[k % 4])
        nv_bytes = nv.encode()
        nv_len = len(nv_bytes)
        if nv_len == 1:
            en_bytes += nv_bytes
        else:
            en_bytes += b'%s'
            cn_bytes.append(ord(nv_bytes.decode()))
    if len(cn_bytes) > 2:
        # 位元組陣列轉漢字
        cn_str = ''
        clen = len(cn_bytes)
        count = int(clen / 3)
        for x in range(0, count):
            i = x * 3
            b = bytes([cn_bytes[i], cn_bytes[i + 1], cn_bytes[i + 2]])
            cn_str += b.decode()
        new = en_bytes.replace(b'%s%s%s', b'%s')
        new = new.decode()
        res = (new % tuple(list(cn_str)))
    else:
        res = en_bytes.decode()
    return res

#傳送資料
def send_data(dataObj):
    data = json.dumps(dataObj)#轉換資料為物件判斷資料傳送型別（群發或者點對點）
    if data == None or len(data) <= 0:
        return False
    if dataObj['type'] == 'personal':
        userto = dataObj['to']
        userfrom = dataObj['from']
        try:
            users[userto]['conn'].send(pack(data))
        except:
            users[userto]['toRead'].append(data)
            print(users[userto]['toRead'])
            ret = {'type': 'server', 'status': 0}
            data = json.dumps(ret)
            users[userfrom]['conn'].send(pack(data))
    if dataObj['type'] == 'group':
        groupto = dataObj['to']
        grps = groups[groupto]
        for user in grps['groupmems']:
            try:
                users[user]['conn'].send(pack(data))
            except:
                print('group Members error')
class WebSocket(threading.Thread):  # 繼承Thread

    GUID = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"

    def __init__(self, conn, name, remote, path="/"):
        threading.Thread.__init__(self)  # 初始化父類Thread
        self.conn = conn
        self.name = name
        self.remote = remote
        self.path = path
        self.buffer = ""

    def run(self):
        headers = {}
        self.handshaken = False
        while True:
            if self.handshaken == False:
                print('Start Handshaken with {}!'.format(self.remote))
                self.buffer += bytes.decode(self.conn.recv(1024))
                if self.buffer.find('\r\n\r\n') != -1:
                    header, data = self.buffer.split('\r\n\r\n', 1)
                    for line in header.split("\r\n")[1:]:
                        key, value = line.split(": ", 1)
                        headers[key] = value

                    headers["Location"] = ("ws://%s%s" % (headers["Host"], self.path))
                    key = headers['Sec-WebSocket-Key']
                    token = b64encode(hashlib.sha1(str.encode(str(key + self.GUID))).digest())

                    handshake = "HTTP/1.1 101 Switching Protocols\r\nUpgrade: websocket\r\nConnection: Upgrade\r\nSec-WebSocket-Accept: " + bytes.decode(
                        token) + "\r\nWebSocket-Origin: " + str(headers["Origin"]) + "\r\nWebSocket-Location: " + str(
                        headers["Location"]) + "\r\n\r\n"

                    self.conn.send(str.encode(str(handshake)))#傳送握手資訊
                    self.handshaken = True
                    print('Handshaken with {} success!'.format(self.remote))

            else:
                all_data = self.conn.recv(128)
                data=parse_recv_data(all_data)

                if not len(all_data):
                    return False
                else:
                    try:
                        #以下為各種請求的處理（登入、註冊、建立群組、傳送訊息等）
                        print(data)
                        #nowTime = time.strftime('%H:%M:%S', time.localtime(time.time()))
                        dataObj = json.loads(data)
                        if dataObj['type'] == 'quit':
                            quituser = dataObj['username']
                            print('User %s Logout!' % (quituser))
                            del users[quituser]['conn']
                            users[quituser]['status'] = 0
                            self.conn.close()
                            return False
                        if (dataObj['type'] == 'login'):
                            regUser = dataObj['username']
                            retStatus = 0
                            try:
                                if users[regUser] and users[regUser]['password'] == dataObj['password']:
                                    if users[regUser]['status'] == 1:
                                        retStatus = 2
                                    else:
                                        users[regUser]['status'] = 1
                                        #toRead = users[regUser]['toRead']
                                        #dataObj = {"type":"login","status":0,"toRead":'~'.join(toRead)}
                                        users[regUser]['toRead'] = []
                                        users[regUser]['conn'] = self.conn
                                else:
                                    retStatus = 1
                            except:
                                retStatus = 1
                            finally:
                                dataObj = {"type": "login", "status": retStatus}
                                data = json.dumps(dataObj)
                                self.conn.send(pack(data))
                            continue
                        if (dataObj['type'] == 'reg'):
                            regUser = dataObj['username']
                            if regUser in users:
                                dataObj = {"type": "reg", "status": 1}
                            else:
                                users[regUser] = {'password':dataObj['password'],'conn':self.conn,'friends':[],'groups':[],'toRead':[],'status':0}
                                dataObj = {"type":"reg","status":0}
                                users[regUser]['status'] = 1
                            data = json.dumps(dataObj)
                            self.conn.send(pack(data))
                            continue
                        if (dataObj['type'] == 'addFriend'):
                            username = dataObj['username']
                            friendname = dataObj['target']
                            if friendname not in users[username]['friends']:
                                users[username]['friends'].append(friendname);
                                users[friendname]['friends'].append(username);
                                dataObj = {"type": "addFriend", "status": 0}
                            else:
                                dataObj = {"type":"reg","status":1}
                            data = json.dumps(dataObj)
                            self.conn.send(pack(data))
                            continue
                        if (dataObj['type'] == 'search'):
                            keywords = dataObj['keywords']
                            gps=[];persons=[]
                            for g in groups:
                                if keywords in g:
                                    gps.append(g)
                            for p in users:
                                if keywords in p:
                                    persons.append(p)
                            dataObj={"type":"search",'groups':gps,'persons':persons}
                            data = json.dumps(dataObj)
                            self.conn.send(pack(data))
                            continue
                        if (dataObj['type'] == 'enterGroup'):
                            gname = dataObj['target']
                            uname = dataObj['username']
                            if uname not in groups[gname]['groupmems']:
                                groups[gname]['groupmems'].append(uname)
                                users[uname]['groups'].append(gname)
                                dataObj = {"type": "enterGroup", "status": 0}
                            else:
                                dataObj = {"type": "enterGroup", "status": 1}
                            data = json.dumps(dataObj)
                            self.conn.send(pack(data))
                            continue
                        if (dataObj['type'] == 'getGroups'):
                            uname = dataObj['username']
                            if uname in users:
                                dataObj = {"type": "getGroups", "status": 0,'list':users[uname]['groups']}
                            else:
                                dataObj = {"type":"getGroups","status":1}
                            data = json.dumps(dataObj)
                            self.conn.send(pack(data))
                            continue
                        if (dataObj['type'] == 'getFriends'):
                            uname = dataObj['username']
                            if uname in users:
                                dataObj = {"type": "getFriends", "status": 0,'list':users[uname]['friends']}
                            else:
                                dataObj = {"type":"getFriends","status":1}
                            data = json.dumps(dataObj)
                            self.conn.send(pack(data))
                            continue
                        if (dataObj['type'] == 'addgroup'):
                            owner = dataObj['username']
                            groupname = dataObj['groupName']
                            groupmotto = dataObj['groupMotto']
                            groupmems = dataObj['groupMems']
                            if groupname in groups:
                                dataObj = {"type": "addgroup", "status": 1}
                            else:
                                members=groupmems.split(',')
                                groups[groupname] = {'owner':owner,'groupname':groupname,'groupmotto':groupmotto,'groupmems':members}
                                dataObj = {"type":"addgroup","status":0}
                                for user in members:
                                    users[user]['groups'].append(groupname)
                            data = json.dumps(dataObj)
                            self.conn.send(pack(data))
                            continue
                        send_data(dataObj)
                    except:
                        print('Something wrong!')


class WebSocketServer(object):
    def __init__(self):
        self.socket = None

    def begin(self):
        print('WebSocketServer Start!')
        self.socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        self.socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
        self.socket.bind(("192.168.0.33", 8899))
        self.socket.listen(50)
        #建立套接字，並監聽
        while True:
            connection, address = self.socket.accept()
            username = "user-" + str(address[1])
            newSocket = WebSocket(connection, username, address)
            newSocket.start()  # 開始執行緒,執行run函式

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

客戶端核心實現（具體程式碼請移步GitHub）

var socket;
function connect() {
    var host = "ws://192.168.0.33:8899";
    socket = new WebSocket(host);
    try {
        socket.onopen = function (msg) {
        $('#tipsDiv').html('<h4 class="ok">伺服器連線成功！</h4>').hide(5000)
    };
        socket.onmessage = function (msg) {};

        socket.onclose = function (msg) {
          $('.loginError').html('伺服器中斷！').show();
          };
    }
    catch (ex) {
        log(ex);
    }
}
function send() {
        var msg = $('#editArea').text();
        msg = {'type':chatType,'from':username,'to':$('#chatArea .title_name').text(),'msg':msg,'time':times};
        msg = JSON.stringify(msg)
        socket.send(msg);
    }

以下為部分功能展示：

註冊

登入成功頁面（模板參考微信）

退出

搜尋含有關鍵字的使用者或者群組

提交搜尋後系統會返回包含關鍵字的使用者或者群組，並且進行標識，當用戶把滑鼠移動到搜尋結果列表之上對於不是好友或者還未進入的群組會出現加號按鈕，這時可以新增好友或者進去群組

新增群組

群聊

群裡一個人發訊息，其他人如果在群聊頁面的話直接可以接受訊息，如果不在群聊頁面也會有訊息提醒

點對點聊天

傳送方

接收方不在聊天頁面

接收方進入聊天頁面並回復訊息

基本展示就到這，所有程式碼已經放到GitHub，有興趣的同學可以一起來玩