(LUẬN văn THẠC sĩ) nghiên cứu giao tiếp thời gian thực trên web WebRTC và ứng dụng xây dựng hệ thống webchat thời gian thực

ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ KHÚC NGỌC HIỆP NGHIÊN CỨU GIAO TIẾP THỜI GIAN THỰC TRÊN WEB WEBRTC VÀ ỨNG DỤNG XÂY DỰNG HỆ THỐNG WEB CHAT THỜI GIAN THỰC LUẬN VĂN THẠC SỸ Hà Nội - 2014 TIEU LUAN MOI download : skknchat@gmail.com ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ KHÚC NGỌC HIỆP NGHIÊN CỨU GIAO TIẾP THỜI GIAN THỰC TRÊN WEB WEBRTC VÀ ỨNG DỤNG XÂY DỰNG HỆ THỐNG WEB CHAT THỜI GIAN THỰC Ngành:Công nghệ thông tin Chuyên ngành: Công nghệ phần mềm Mã số: 60480103 LUẬN VĂN THẠC SỸ NGƯỜI HƯỚNG DẪN KHOA HỌC: PGS TS TRƯƠNG NINH THUẬN TS TRỊNH THANH BÌNH Hà Nội - 2014 TIEU LUAN MOI download : skknchat@gmail.com LỜI CAM ĐOAN Tơi xin cam đoan cơng trình nghiên cứu riêng Các số liệu kết nghiên cứu luận văn trung thực vàkhông chép Các thơng tin trích dẫn luận văn đƣợc rõ nguồn gốc Hà Nội, ngày tháng năm 2014 Học viên Khúc Ngọc Hiệp TIEU LUAN MOI download : skknchat@gmail.com TÓM TẮT WebRTC nỗ lực để xây dựng framework mở có khả giao tiếp audio video thời gian thực, biến trình duyệt web thành tảng cho giao tiếp ngƣời với ngƣời Giao tiếp thời gian thực trình duyệt web có trƣớc nhiênchúng ta phải cài đặt phần mềm bên thứ ba lên trình duyệt web WebRTC mang lại hỗ trợ giao tiếp thời gian thực từ bên trình duyệt web nhà phát triển web sử dụng cách tự thông qua JavaScript API tiêu chuẩn Điều mang lại giao tiếp thời gian thực nhƣ tính cho web, thúc đẩy đổi Luận văn nghiên cứu chuyên sâu WebRTC, kiến trúc mơ hình WebRTC, giao thức kỹ thuật đƣợc sử dụng WebRTC, API WebRTC vấn đề bảo mật tính riêng tƣ đƣợc giải WebRTC Dựa kết nghiên cứu lý thuyết cho WebRTC trạng hệ thống hỗ trợ khách hàng trực tuyến website thƣơng mại điện tử Việt Nam phải sử dụng ứng dụng chat bên nhƣ Yahoo messenger Skype, tiến hành xây dựng ứng dụng web chat thời gian thực sử dụng WebRTC để cải tiến hệ thống hỗ trợ khách hàng Khách hàng cài đặt thêm ứng dụng plugin để chat video, gửi tin nhắn gửi file với nhân viên hỗ trợ khách hàng trình duyệt web Chúng tơi thấy WebRTC cơng nghệ khả thi, thích hợp cho trƣờng hợp giao tiếp một từ trình duyệt đến trình duyệt Mặc dù chúng tơi phát số thách thức chƣa đƣợc giải quyết, không thấy trở ngại vƣợt qua ngăn cản việc chấp nhận WebRTC WebRTC mở hội cho công ty sử dụng trực tiếp để cung cấp dịch vụ giao tiếp thời gian thực web, tạo không gian cho nhà cung cấp PaaS WebRTC thị trƣờng Thêm vào đó, WebRTC cho phép kết nối với hệ thống cũ nhƣ PSTN hay PLMN, mở hội cho nhà cung cấp viễn thông để khám phá tạo cách thức truyền thông cho khách hàng họ TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc MỤC LỤC LỜI CAM ĐOAN TÓM TẮT MỤC LỤC DANH SÁCH HÌNH VẼ DANH SÁCH BẢNG BẢNG TỪ VIẾT TẮT MỞ ĐẦU CHƢƠNG 1: GIỚI THIỆU VỀ TRUYỀN THÔNG WEB THỜI GIAN THỰC WEBRTC 1.1 Ngắn gọn lịch sử WebRTC .9 1.2 Kiến trúc WebRTC 10 1.3 Chồng giao thức WebRTC .13 1.4 Các API WebRTC 19 1.5 Kênh báo hiệu WebRTC 20 1.6 Bảo mật WebRTC 21 CHƢƠNG 2: GIỚI THIỆU VỀ EASYRTC FRAMEWORK 23 2.1 Giới thiệu EasyRTC framework 23 2.2 Cài đặt chạy máy chủ EasyRTC 24 2.3 Sử dụng EasyRTC .26 2.4 Một số API tiện ích khác EasyRTC 30 CHƢƠNG 3: SỬ DỤNG EASYRTC FRAMEWORK ĐỂ XÂY DỰNG ỨNG DỤNG WEB CHAT THỜI GIAN THỰC 33 3.1 Phân tích hệ thống .33 3.1.1 Mục tiêu tổng thể ứng dụng web chat thời gian thực 33 3.1.2 Thực trạng hệ thống tư vấn bán hàng trực tuyến 33 3.1.3 Phân tích yêu cầu ứng dụng .39 3.2 Thiết kế ứng dụng .39 3.2.1 Biểu đồ trường hợp sử dụng .39 3.2.2 Biểu đồ 43 3.2.3 Biểu đồ lớp 45 3.2.4 Thiết kế giao diện .46 3.3 Thực ứng dụng 47 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc 3.4 Chạy thử đánh giá ứng dụng .50 3.4.1 Chạy thử ứng dụng 51 3.4.2 Đánh giá ứng dụng .57 KẾT LUẬN 58 TÀI LIỆU THAM KHẢO 59 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc DANH SÁCH HÌNH VẼ Hình 1: Kiến trúc tổng thể WebRTC [3] 11 Hình 2: Kiến trúc bên WebRTC [8] 12 Hình 3: Chồng giao thức WebRTC [1] 14 Hình 4: Kênh báo hiệu WebRTC 21 Hình 5: Góc hỗ trợ khách hàng trực tuyến website trananh.vn 34 Hình 6: Góc hỗ trợ khách hàng trực tuyến website mediamart.vn 34 Hình 7: Góc hỗ trợ khách hàng trực tuyến website nama.vn 35 Hình 8: Lựa chọn hỗ trợ thông qua Skype website trananh.vn 36 Hình 9: Trình duyệt yêu cầu khách hàng cho phép bật ứng dụng Skype máy tính 36 Hình 10: Màn hình đăng nhập Skype máy tính 37 Hình 11: Màn hình đăng nhập Skype máy tính - tiếp 37 Hình 12: Bắt đầu chat với nhân viên hỗ trợ khách hàng 38 Hình 13: Biểu đồ trƣờng hợp sử dụng 40 Hình 14: Biểu đồ 45 Hình 15: Biểu đồ lớp 46 Hình 16: Thiết kế wireframe cho ứng dụng web chat 47 Hình 17: Nhân viên mở trang hỗ trợ khách hàng bên phần quản trị website 51 Hình 18: Nhân viên hỗ trợ khách hàng đăng nhập vào phòng hỗ trợ mà họ chịu trách nhiệm 52 Hình 19: Khách hàng xem sản phẩm tìm đến góc hỗ trợ khách hàng 52 Hình 20: Khách hàng lựa chọn Gọi nhân viên hỗ trợ "Kinh doanh điện thoại" 53 Hình 21: Khách hàng lựa chọn kết nối với nhân viên hỗ trợ sau đăng nhập 53 Hình 22: Trình duyệt yêu cầu quyền truy cập tới máy ảnh microphone 54 Hình 23: Nhân viên hỗ trợ nhận đƣợc yêu cầu kết nối từ khách hàng đồng ý kết nối 54 Hình 24: Nhân viên hỗ trợ khách hàng nói chuyện, chia sẻ webcam gửi tin nhắn với 55 Hình 25: Gửi file nói chuyện 55 Hình 26: Nhận file lƣu lại máy tính 56 Hình 27: Ứng dụng chạy điện thoại Android với trình duyệt Chrome cho Android 56 DANH SÁCH BẢNG Bảng 1: Bảng mô tả trƣờng hợp sử dụng 43 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc BẢNG TỪ VIẾT TẮT Từ viết tắt Giải nghĩa WebRTC Web Real-Time Communications PaaS Platform as a Service PSTN Public Switched Telephone Network PLMN Public Land Mobile Network WWW World Wide Web SIP Session Initiation Protocol VoIP Voice over Internet Protocol IETF Internet Engineering Task Force W3C World Wide Web Consortium TCP Transmission Control Protocol UDP User Datagram Protocol STUN Session Traversal Utilities for NAT TURN Traversal Using Relays around NAT SDP Session Description Protocol DTLS Datagram Transport Layer Security SCTP Stream Control Transport Protocol SRTP Secure Real-Time Transport Protocol ICE Interactive Connectivity Establishment (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc MỞ ĐẦU World Wide Web (WWW hay Web) hệ thống đƣợc biết đến rộng rãi đƣợc truy cập qua Internet Hơn nữa, đa số ngƣời sử dụng Internet, từ "Internet" tƣơng đƣơng với Web Đối với họ, Internet bạn truy cập đƣợc thơng qua trình duyệt web Hai yếu tố liên kết với phát triển tính dịch vụ web cung cấp có tác động đến phần khác hệ sinh thái Internet, ví dụ hệ thống khác, nhà cung cấp dịch vụ, doanh nghiệp ngƣời sử dụng Vì lý đó, phát triển web thành phần quan trọng phát triển thân Internet Ban đầu trang web, nhƣ trình duyệt web - giao diện để truy cập web có dạng văn đơn giản Sau đó, cột mốc quan trọng phát triển web đời trình duyệt web Mosaic, có giao diện ngƣời dùng hiển thị đồ họa văn bản, trở thành phổ biến tài liệu web Sau đó, phát triển trình duyệt web đại công nghệ hỗ trợ mang nội dung đa phƣơng tiện đƣa lên web Video audio, hình ảnh tĩnh hình ảnh động đƣợc sử dụng trang web tƣơng tác, trở thành chuẩn mực Tuy nhiên, nội dung đa phƣơng tiện chủ yếu là nội dung tĩnh đƣợc sản xuất trƣớc phát hành, sau đƣợc gửi lên web để đến với mục tiêu ngƣời nhận Web, mặt khác, ngày trở nên tảng cho truyền thông, thúc đẩy gia tăng mạng xã hội, địa điểm nơi ngƣời thể thân chia sẻ với bạn bè, gia đình mảnh khác sống họ Bất thông tin liên lạc thời gian thực cần thiết, không nhờ đến trợ giúp phần mềm bổ sung khác, trang web cung cấp tin nhắn tức thời dựa văn Giao tiếp web thời gian thực (Web Real-Time Communications - WebRTC), nỗ lực để loại bỏ hạn chế web đƣợc điều hành số nhà cung cấp trình duyệt (Google, Mozilla, Microsoft, Opera) công ty tiếng khác (Cisco, Ericsson, vv) WebRTC framework mở có khả giao tiếp audio video thời gian thực, biến trình duyệt web thành tảng truy cập chung để giao tiếp ngƣời với ngƣời Trong hội thoại video thời gian thực với Internet, sử dụng đƣợc trình duyệt web cách cài (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc đặt thêm phần mềm bên thứ ba, chẳng hạn nhƣ Adobe Flash [15] Skype plugin WebRTC mang lại hỗ trợ cho giao tiếp thời gian thực cho trình duyệt web giúp nhà phát triển web sử dụng cách tự thông qua Javascript API đƣợc tiêu chuẩn hóa Cấu trúc luận văn: Ngồi phần tóm tắt, kết luận phụ lục Luận văn đƣợc chia thành ba chƣơng nhƣ sau:  Chƣơng 1: Tổng quan lý thuyết Chƣơng đƣợc dành để nói kiến trúc WebRTC kỹ thuật đƣợc sử dụng tảng  Chƣơng 2: Tìm hiểu EasyRTC framework Chƣơng chúng tơi tìm hiểu framework đƣợc xây dựng WebRTC để hỗ trợ nhà phát triển việc xây dựng ứng dụng có sử dụng WebRTC  Chƣơng 3: Sử dụng EasyRTC framework để xây dựng ứng dụng web chat thời gian thực Chƣơng vào xây dựng hệ thống web chat thời gian thực sử dụng WebRTC để hỗ trợ cho hệ thống hỗ trợ khách hàng trực tuyến website thƣơng mại điện tử (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc callback cho lớp Easyrtc để bắt kiện nhận đƣợc/hủy gọi, nhận đƣợc/kết thúc audio/video stream từ phía bên kết nối LiveChat params adminOnline lastFileName liveChatContainer init() create() addToConversation() setCredential() leaveRoom() roomEntryListener() peerListener() connect() occupantListener() acceptRejectCB() receiveStatusCB() blobAcceptor() removeIfPresent() setUpMirror() performCall() getGroupId() sendMessage() loginSuccess() loginFailure() disconnect() Widget widgetContainer params init() create() loadHtml() buildGroup() buildWidget() Easyrtc setStreamAcceptor() setOnStreamClosed() setCallCancelled() setAcceptChecker() Hình 15: Biểu đồ lớp 3.2.4 Thiết kế giao diện Dựa yêu cầu ứng dụng web chat thời gian thực cho hệ thống hỗ trợ khách hàng trực tuyến, thiết kế wireframe cho giao diện ứng dụng nhƣ sau:  Phần bên phải widget, hiển thị danh sách phịng hỗ trợ khách hàng, phịng có danh sách nhân viên hỗ trợ khách hàng phụ trách mảng hàng hóa  Khi khách hàng bấm vào nút gọi nhân viên hỗ trợ khách hàng định, hiển thị dialog hiển thị camera khách hàng, camera nhân viên hỗ trợ khách hàng, cho phép khách hàng nhân viên hỗ trợ gửi tin nhắn dạng văn gửi file cách kéo file vào phần gửi tin nhắn  Khách hàng kết thúc gọi cách bấm vào nút đóng (x), đóng dialog lại 46 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc Hình 16: Thiết kế wireframe cho ứng dụng web chat 3.3Thực ứng dụng Để thực ứng dụng web chat thời gian thực sử dụng WebRTC, định chọn sử dụng EasyRTC framework, framework đƣợc xây dựng WebRTC có API để giúp nhà phát triển sử dụng WebRTC đƣợc dễ dàng Ngoài ra, để làm giao diện cho ứng dụng, lựa chọn sử dụng Bootstrap framework, framework HTML, CSS JavaScript cho phát triển ứng dụng web Để biết thêm thông tin Bootstrap framework, bạn tham khảo địa http://getbootstrap.com/ Để cho việc tích hợp ứng dụng web chat vào website thƣơng mại điện tử có sẵn đƣợc dễ dàng, thiết kế ứng dụng web chat dƣới dạng plugin:  Tất code logic ứng dụng đƣợc viết file JavaScript tên webrtc.js  Khi muốn tích hợp ứng dụng vào trang web bất kỳ, việc thêm thẻ trỏ đến file JavaScript webrtc.js, khai báo 47 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc containertrong thẻ để chứa widget, gọi hàm tạo widget để tạo widget nhƣ wireframe bên  Tất thông tin phòng nhân viên hỗ trợ đƣợc khai báo truyền cho hàm tạo widget Thiết kế bảo mật cho ứng dụng đƣợc thực nhƣ sau:  Nhân viên hỗ trợ khách hàng cần phải đăng nhập vào backend website thƣơng mại điện tử trƣớc truy cập vào trang hỗ trợ khách hàng để đăng nhập với tên quy định trƣớc, chờ đợi gọi từ phía khách hàng  Bất truy cập trực tiếp đến địa trang hỗ trợ khách hàng cho nhân viên hỗ trợ khách hàng phải chuyển sang trang đăng nhập hệ thống trƣớc đƣợc sử dụng Điều đƣợc đảm bảo cách thiết lập file config máy chủ web  Khách hàng cần đăng ký tài khoản với website trƣớc đăng nhập vào phần hỗ trợ khách hàng Hoặc khách hàng lựa chọn đăng nhập tài khoản Facebook, Google Twitter Trái tim ứng dụng file webrtc.js, file JavaScript Trong file này, chúng tơi định nghĩa hai đối tƣợng ứng dụng: WebRTC.LiveChat vàWebRTC.Widget WebRTC.Widget Đối tƣợng WebRTC.Widgetđƣợc xây dựng để tạo widget hỗ trợ khách hàng, bao gồm phòng hỗ trợ khách hàng danh sách nhân viên hỗ trợ phòng Để tạo đối tƣợng WebRTC.Widget gọi hàm WebRTC.Widget.create( ) nhƣ sau: var customerSupport = [ {groupName: 'Tƣ vấn bán hàng', group: [{roomID: 'tuvanlaptop', adminUserName: 'Kinh doanh laptop'}, {roomID: 'tuvandienthoai', adminUserName: 'Kinh doanh điện thoại'}, {roomID: 'tuvanmayanh', adminUserName: 'Kinh doanh máy ảnh'}]}, 48 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc {groupName: 'Tƣ vấn bảo hành', group: [{roomID: 'baohanhlaptop', adminUserName: 'Bảo hành laptop'}, {roomID: 'baohanhdienthoai', adminUserName: 'Bảo hành điện thoại'}, {roomID: 'baohanhmayanh', adminUserName: 'Bảo hành máy ảnh'}]}, {groupName: 'Tƣ vấn trả góp', group: [{roomID: 'tragop1', adminUserName: 'Tƣ vấn trả góp 1'}, {roomID: 'tragop2', adminUserName: 'Tƣ vấn trả góp 2'}]} ]; WebRTC.Widget.create('customerSupportWidget', true, customerSupport); Hàm WebRTC.Widget.create() đƣợc định nghĩa nhƣ dƣới đây, “containerId” ID trang web mà muốn nhúng ứng dụng web chat vào “widgetParams” mảng đối tƣợng phòng hỗ trợ khách hàng, phòng mảng nhân viên hỗ trợ, isAdmin true nhúng widget vào bên hệ thống quản trị website để nhân viên hỗ trợ khách hàng sử dụng, isAdmin false nhung widget vào trang sản phẩm cho khách hàng sử dụng WebRTC.Widget.create = function(containerId, isAdmin, widgetParams) { window.WebRTC.Widget = new WebRTC.Widget(containerId,isAdmin, widgetParams); }; Dƣới hàm khởi tạo cho đối tƣợng WebRTC.Widget, gọi đến hàm init() để bắt đầu xây dựng giao diện cho widget: WebRTC.Widget = function(containerId, isAdmin, widgetParams) { this.widgetContainer = containerId; this.isAdmin = isAdmin; this.params = widgetParams; this.init(); }; 49 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc WebRTC.LiveChat Đối tƣợng WebRTC.LiveChat đƣợc xây dựng để quản lý gọi riêng lẻ Đối tƣợng đƣợc khởi tạo tạo dialog cho gọi, cho phép khách hàng nhập tên đăng nhập gọi tới nhân viên hỗ trợ khách hàng Sau kết nối thành công với nhân viên hỗ trợ khách hàng, hiển thị thơng tin gọi: video hai ngƣời thực gọi, cho phép gửi tin nhắn dạng văn gửi file Để kết thúc gọi, khách hàng bấm vào nút “Kết thúc” Để tạo đối tƣợng WebRTC.LiveChat, gọi hàm WebRTC.LiveChat.create() nhƣ sau: WebRTC.LiveChat.create('webrtc-chat', { roomID: 'phongkinhdoanh', adminUserName: 'nhanvienkinhdoanh', admin: true } ); Hàm WebRTC.LiveChat.create() đƣợc định nghĩa nhƣ sau: WebRTC.LiveChat.create = function(liveChatId, liveChatParams) { window.WebRTC.LiveChat = new WebRTC.LiveChat(liveChatId, liveChatParams); }; Đây hàm khởi tạo cho đối tƣợng WebRTC.LiveChat: WebRTC.LiveChat = function(liveChatId, liveChatParams) { this.liveChatContainer = liveChatId; this.params = liveChatParams; this.adminOnline = false; this.init(); }; 3.4Chạy thử đánh giá ứng dụng Trong phần chúng tối tiến hành chạy thử ứng dụng web chat đánh giá tính hiệu ứng dụng đƣợc xây dựng 50 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc 3.4.1 Chạy thử ứng dụng Sau nhân viên hỗ trợ khách hàng đăng nhập vào hệ thống quản lý website đƣợc tích hợp ứng dụng web chat thời gian thực, họ mở liên kết hỗ trợ khách hàng để đăng nhập chờ đợi gọi đến từ khách hàng: Hình 17: Nhân viên mở trang hỗ trợ khách hàng bên phần quản trị website 51 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc Hình 18: Nhân viên hỗ trợ khách hàng đăng nhập vào phòng hỗ trợ mà họ chịu trách nhiệm Hình 19: Khách hàng xem sản phẩm tìm đến góc hỗ trợ khách hàng 52 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc Hình 20: Khách hàng lựa chọn Gọi nhân viên hỗ trợ "Kinh doanh điện thoại" Hình 21: Khách hàng lựa chọn kết nối với nhân viên hỗ trợ sau đăng nhập 53 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc Hình 22: Trình duyệt yêu cầu quyền truy cập tới máy ảnh microphone Hình 23: Nhân viên hỗ trợ nhận yêu cầu kết nối từ khách hàng đồng ý kết nối 54 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc Hình 24: Nhân viên hỗ trợ khách hàng nói chuyện, chia sẻ webcam gửi tin nhắn với Hình 25: Gửi file nói chuyện 55 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc Hình 26: Nhận file lưu lại máy tính Hình 27: Ứng dụng chạy điện thoại Android với trình duyệt Chrome cho Android 56 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc 3.4.2 Đánh giá ứng dụng Qua việc tích hợp chạy thử ứng dụng web chat nhận thấy việc tích hợp ứng dụng webchat vào website nhanh chóng Việc kết nối khách hàng với nhân viên website dễ dàng Khách hàng không cần phải chuyển qua hình ứng dụng khác mà đƣợc hỗ trợ trình duyệt web Khách hàng khơng cần phải cài đặt thêm ứng dụng plugin để kết nối với nhân viên hỗ trợ khách hàng Chất lƣợng âm gọi tốt, hai bên nói chuyện cách rõ ràng, chất lƣợng hình ảnh rõ nét Việc gửi tin nhắn dễ dàng, để chia sẻ file, cần kéo file từ máy tính vào hộp nhập tin nhắn, phía bên nhận đƣợc thơng báo nhận file Nhƣ ứng dụng đáp ứng đƣợc yêu cầu đƣợc đề phần phân tích hệ thống, nhiên cịn số hạn chế sau đây:  Thiết kế hệ thống cho phép nhân viên hỗ trợ khách hàng thời điểm  Ứng dụng chƣa cho phép lựa chọn hỗ trợ khách hàng thông qua tin nhắn văn Hiện tại, ứng dụng sử dụng microphone webcam kết nối So với hệ thống hỗ trợ khách hàng trực tuyến website thƣơng mại điện tử, ứng dụng web chat mà chúng tơi xây dựng có ƣu điểm sau đây:  Khách hàng nhanh chóng kết nối đƣợc với nhân viên hỗ trợ khách hàng trình duyệt web, mà khơng cần phải sử dụng đến plugin ứng dụng chat độc lập nhƣ Skype Yahoo messenger nhƣ hệ thống hỗ trợ khách hàng  Khách hàng nhân viên bán hàng thực đàm thoại, gọi video, chat chia sẻ file nhƣ sử dụng ứng dụng chat độc lập nhƣSkype Yahoo messenger nhƣ hệ thống hỗ trợ khách hàng 57 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc KẾT LUẬN Trong luận văn này, chúng tơi tìm hiểu đƣợc WebRTC kiến trúc, giao thức đƣợc sử dụng, API, kênh báo hiệu mơ hình bảo mật Đồng thời, chúng tơi tìm hiểu framework sử dụng WebRTC EasyRTC framework, giúp nhà phát triển ứng dụng sử dụng WebRTC đƣợc dễ dàng Chúng tơi phân tích, thiết kế thực ứng dụng web chat thời gian thực sử dụng WebRTC EasyRTC framework để tích hợp vào website thƣơng mại điện tử để phục vụ cho việc hỗ trợ khách hàng trực tuyến Chúng nhận thấy WebRTC tiếp tục đƣợc phát triển chƣa phải phiên thức, nhƣng việc sử dụng WebRTC tỏ hiệu ứng dụng web Tất nhiên việc số trình duyệt chƣa hỗ trợ WebRTC nhƣ Safari Apple Internet Explorer Microsoft ảnh hƣởng không nhỏ đến khả chạy trình duyệt khác WebRTC Giải pháp cho vấn đề sử dụng WebRTC plugin cho trình duyệt Safari Internet Explorer nhƣ Temasys WebRTC plugin Dựa kết nghiên cứu tại, đề xuất số lĩnh vực có giá trị cho nghiên cứu tƣơng lai Chúng tơi nhận thấy có nhiều website thƣơng mại điện tử đƣợc xây dựng dựa hệ thống CMS nhƣ WordPress, Drupal Joomla Các CMS có chế cài đặt sử dụng plugin thơng minh, sử dụng ứng dụng web chat dƣới dạng plugin cho CMS để dễ dàng tích hợp vào website thƣơng mại điện tử Chúng ta thêm vào tính chia sẻ hình cho ứng dụng web chat cách sử dụng kênh liệu WebRTC Điều có ích trƣờng hợp hỗ trợ khách hàng giải vấn đề kỹ thuật khách hàng máy tính điện thoại 58 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TÀI LIỆU THAM KHẢO Tiếng Anh: Alan B Johnston and Daniel C Burnett (2013), WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web, Digital Codex LLC, pp 10, 124, 128, 132 Ilya Grigorik (2013), High Performance Browser Networking, O'Reilly Media, pp 310-312 Salvatore Loreto and Simon Pietro Romano,Real-Time Communication with WebRTC, O'Reilly Media, pp 4-5 Sam Dutton (2013), WebRTC in the real world: STUN, TURN and signaling, http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/ Harald Alvestrand and Stefan Håkansson (2014), Web Real-Time Communications Working Group Charter, http://www.w3.org/2011/04/webrtc-charter.html Sean Turner, Ted Hardie and Cullen Jennings (2014), Rtcweb Status Pages, http://tools.ietf.org/wg/rtcweb/charters Daniel C Burnett, Adam Bergkvist, Cullen Jennings and Anant Narayanan (2012), Media Capture and Streams,http://dev.w3.org/2011/webrtc/editor/getusermedia.html Justin Uberti and Sam Dutton (2013), WebRTC General Overview, http://www.webrtc.org/reference/architecture J Rosenberg and H Schulzrinne (2012), An Offer/Answer Model with the Session Description Protocol (SDP), http://tools.ietf.org/html/rfc3264 10 Andrii Sergiienko (2014), WebRTC Blueprints, Packt Publishing, pp 42 11 Jason Lengstorf and Phil Leggetter (2013), Realtime Web Apps With HTML5 WebSocket, PHP, and jQuery, Apress, pp.10 12 Vanessa Wang, Frank Salim and Peter Moskovits (2013), The Definitive Guide to HTML5 WebSocket, Apress, pp 13 Pedro Teixeira (2013), Professional Node.js: Building JavaScript-Based Scalable Software, John Wiley & Sons, Inc, pp 14 Rohit Rai (2013), Socket.IO Real-time Web Application Development, Packt Publishing, pp 48 59 (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc TIEU LUAN MOI download : skknchat@gmail.com (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc (LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc(LUAN.van.THAC.si).nghien.cuu.giao.tiep.thoi.gian.thuc.tren.web.WebRTC.va.ung.dung.xay.dung.he.thong.webchat.thoi.gian.thuc