?在上一篇內(nèi)容中，作者?monkeyHi?已經(jīng)分享了聲網(wǎng)Agora?信令?SDk?的基本使用，并分析了服務(wù)器端?Demo?的接口原理。這一篇，作者將帶大家進(jìn)行簡單的實(shí)踐，實(shí)現(xiàn)一個基于?Web?的簡單的聊天室雛形。 歡迎訪問?RTC 開發(fā)者社區(qū)，獲取?Demo?鏈接，與作者交流。

基于Agora已經(jīng)發(fā)布的?Web?版?Demo，只要簡單配置就已經(jīng)具備最基本的實(shí)時聊天室功能。

獲取 Web 版 demo

我們基于官方的?Demo?來修改出一個聊天室。下載好?Web?Demo?后解壓，目錄如下：

|---Agora_Signaling_Web|---libs // sdk 在這里|---samples // demo在這里|---Agora-Signaling-Tutorial-Web // 聊天室demo

用Visual?Studio?Code?打開?samples?目錄下的?Agora-Signaling-Tutorial-Web。

|——Agora-Signaling-Tutorial-Web|—src| ├─assets| │ ├─images| │ └─stylesheets| ├─pages| │ ├─index| │ └─meeting| └─utils|—static|--agora.config.js // 這里配置AppId|--AgoraSig.js // 復(fù)制它到 assets 目錄

安裝依賴包和運(yùn)行demo

先簡單說一下 Web 端的 SDK，這個?SDK?包裝程度很高，甚至不需要開發(fā)者懂websockt和WebRTC。只要調(diào)用對應(yīng)的功能接口即可。

接下來，我們一起跑起Demo，這個Demo是一個webpack項目，專業(yè)的Web開發(fā)工程師一定不會覺著陌生。

• 首先，復(fù)制 AgoraSig.js到asstes目錄

• 其次，npm install

• 接下來，配置 appid 打開 src\static\agora.config.js ，修改AGORAAPPID 為我們自己的AppId

• 最后，npm start

這時，瀏覽器應(yīng)該已經(jīng)彈出一個頁面

隨便輸入一個用戶名，我們就可以進(jìn)入聊天室了，當(dāng)然大家可以添加自己的用戶鑒權(quán)業(yè)務(wù)。

我們打開兩個標(biāo)簽頁，分別用accontA?和accontB的身份加入同一個p2p頻道，嘗試互發(fā)消息。

筆者發(fā)現(xiàn)，我們這個聊天室并不需要另外運(yùn)行server端。而前面介紹的server端，從接口上看，其功能更傾向于做系統(tǒng)廣播、系統(tǒng)消息通知。因此，如果你想實(shí)現(xiàn)具備云消息備份的功能的聊天軟件，必須要在端上實(shí)現(xiàn)存儲和上傳備份。

毫不夸張的說，這個聊天室，只要一個?page?服務(wù)就可以跑起來了。

Demo 代碼講解

拿到一個web端項目，我們首先要看的就是package.json。我們可以從中看到項目依賴哪些Package以及項目的啟動腳本。

"scripts": {"test": "jest ./test", // 測試"lint": "eslint .", // eslint格式化當(dāng)前目錄"format": "eslint . --fix", // eslint fix當(dāng)前目錄下的代碼格式"dev": "cross-env NODE_ENV=development webpack-dev-server --open", // 這個會啟動 webpack-dev-server 并用瀏覽器打開頁面"start": "npm run dev", // 功能同上一條"build": "cross-env NODE_ENV=production webpack --progress --hide-modules" // 編譯},

?

配置文件 static/agora.config.js

只需要在以下兩行代碼中進(jìn)行配置。

const AGORA_APP_ID = 'appid' // appid const AGORA_CERTIFICATE_ID = '' // 如果開啟了token模式，這里要配置certificate_id

SDK文件 static/AgoraSig.js

這里和lib目錄中的SDK文件是一樣的，可以用新的sdk來替換。新下載下來的demo?，還應(yīng)該復(fù)制該文件到?src/assets目錄下。

utils 目錄

utils目錄中封裝了一些工具類。

signalingClient.js

這個文件中，主要對信令SDK做了進(jìn)一步封裝，將一些Action?轉(zhuǎn)換為promise，?同時用?Event?替代了Callback。

/*** Wrapper for Agora Signaling SDK* Transfer some action to Promise and use Event instead of Callback*/ import EventEmitter from 'events';// 信令客戶端類 export default class SignalingClient {constructor(appId, appcertificate) {this._appId = appId;this._appcert = appcertificate;// Init signal using signal sdkthis.signal = Signal(appId) // eslint-disable-line // init event emitter for channel/session/callthis.channelEmitter = new EventEmitter();this.sessionEmitter = new EventEmitter();}/*** @description login agora signaling server and init 'session'* 登錄 信令服務(wù)，并初始化會話* @description use sessionEmitter to resolve session's callback* @param {String} account* @param {*} token default to be omitted* @returns {Promise}*/login(account, token = '_no_need_token') {this.account = account;return new Promise((resolve, reject) => {this.session = this.signal.login(account, token);// Proxy callback on session to sessionEmitter['onLoginSuccess','onError','onLoginFailed','onLogout','onMessageInstantReceive','onInviteReceived'].map(event => {return (this.session[event] = (...args) => {this.sessionEmitter.emit(event, ...args);});});// Promise.thenthis.sessionEmitter.once('onLoginSuccess', uid => {this._uid = uid;resolve(uid);});// Promise.catchthis.sessionEmitter.once('onLoginFailed', (...args) => {reject(...args);});});}/*** @description logout agora signaling server* 退出信令服務(wù)* @returns {Promise}*/logout() {return new Promise((resolve, reject) => {this.session.logout();this.sessionEmitter.once('onLogout', (...args) => {resolve(...args);});});}/*** @description join channel* 加入某個頻道* @description use channelEmitter to resolve channel's callback* @param {String} channel* @returns {Promise}*/join(channel) {this._channel = channel;return new Promise((resolve, reject) => {if (!this.session) {throw {Message: '"session" must be initialized before joining channel'};}this.channel = this.session.channelJoin(channel);// Proxy callback on channel to channelEmitter// 將回調(diào) 都代理到 對應(yīng)channelEmitter['onChannelJoined','onChannelJoinFailed','onChannelLeaved','onChannelUserJoined','onChannelUserLeaved','onChannelUserList','onChannelAttrUpdated','onMessageChannelReceive'].map(event => {return (this.channel[event] = (...args) => {this.channelEmitter.emit(event, ...args);});});// Promise.thenthis.channelEmitter.once('onChannelJoined', (...args) => {resolve(...args);});// Promise.catchthis.channelEmitter.once('onChannelJoinFailed', (...args) => {this.channelEmitter.removeAllListeners()reject(...args);});});}/*** @description leave channel* 離開當(dāng)前頻道* @returns {Promise}*/leave() {return new Promise((resolve, reject) => {if (this.channel) {this.channel.channelLeave();this.channelEmitter.once('onChannelLeaved', (...args) => {this.channelEmitter.removeAllListeners()resolve(...args);});} else {resolve();}});}/*** @description send p2p message* 發(fā)送點(diǎn)對點(diǎn)消息* @description if you want to send an object, use JSON.stringify* @param {String} peerAccount* @param {String} text*/sendMessage(peerAccount, text) {this.session && this.session.messageInstantSend(peerAccount, text);}/*** @description broadcast message in the channel * 發(fā)送頻道消息* @description if you want to send an object, use JSON.stringify* 可以通過JSON.Stringify的方式發(fā)送object* @param {String} text*/broadcastMessage(text) {this.channel && this.channel.messageChannelSend(text);} }

pages

這里面分別是兩個頁面的實(shí)現(xiàn)，默認(rèn)的index頁面和聊天頁面。大家可以在對webpack有一定了解的情況下，修改這兩個頁面。

pages/index.js

大家注意這里，?點(diǎn)擊Join-meeting，我們獲取id為account-name的DOM值，然后將account的值放到的url中。

$('#join-meeting').click(function(e) {// Join btn clickede.preventDefault();var account = $('#account-name').val() || '';if (checkAccount(account)) {// Account has to be a non empty numeric valuewindow.location.href = `meeting.html?account=${account}`;} else {$('#account-name').removeClass('is-invalid').addClass('is-invalid');} });

后續(xù)聊天頁面的account值通過url中的account參數(shù)來傳值。

pages/meeting.js

metting.js中主要定義了client類和聊天相關(guān)的類方法。首先，我們來看看文件尾部：

// 檢測獲取appid 并檢測是否為空 const appid = AGORA_APP_ID || '',appcert = AGORA_CERTIFICATE_ID || ''; if (!appid) {alert('App ID missing!'); } //從url獲取account值 ，Browser 模塊事先在util/index.js中定義好的。 let localAccount = Browser.getParameterByName('account'); let signal = new SignalingClient(appid, appcert); // Let channelName = Math.random() * 10000 + ""; // by default call btn is disabled // 信令登陸 signal.login(localAccount).then(() => {// Once logged in, enable the call btnlet client = new Client(signal, localAccount);$('#localAccount').html(localAccount); });

接下來，我們應(yīng)該關(guān)注client類，這里筆者只節(jié)選部分代碼。相信很多朋友都發(fā)現(xiàn)了，demo中聊天頭像都一樣。其實(shí)，生成渲染消息的方法里市可以自定義頭像的，默認(rèn)被寫為固定圖片，大家其實(shí)可以根據(jù)accont來拼裝頭像鏈接的，當(dāng)然你得自己做個用戶頭像接口。

buildMsg(msg, me, ts) {let html = '';let timeStr = this.compareByLastMoment(ts);if (timeStr) {html += `<div>${timeStr}</div>`;}let className = me ? 'message right clearfix' : 'message clearfix';html += '<li class="' + className + '">';// 注意看這里 html += '<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/1_copy.jpg">';html +='<div class="bubble">' +Utils.safe_tags_replace(msg) +'<div class="corner"></div>';html += '<span>' + this.parseTwitterDate(ts) + '</span></div></li>';return html;}

這里大家要注意跨域的問題。需要自己對接口url做代理來解決跨域安全問題。開發(fā)狀態(tài)下，直接配置devServer的proxy即可。又有的朋友說啦，我想保留消息記錄，其實(shí)在端上保存消息記錄還是比較容易的。注意看onReceiveMessage()。

onReceiveMessage(account, msg, type) {let client = this;var conversations = this.chats.filter(function(item) {return item.account === account;});if (conversations.length === 0) {// No conversation yet, create oneconversations = [{ id: new Date().getTime(), account: account, type: type }];client.chats.splice(0, 0, conversations[0]);client.updateLocalStorage();client.updateChatList();}// 可以看到下面對消息做了簡單處理，然后丟到msgs中for (let i = 0; i < conversations.length; i++) {let conversation = conversations[i];let msgs = this.messages[conversation.id] || [];let msg_item = { ts: new Date(), text: msg, account: account };msgs.push(msg_item);this.updateMessageMap(conversation, msgs);let chatMsgContainer = $('.chat-messages');if (String(conversation.id) === String(this.current_conversation.id)) {this.showMessage(this.current_conversation.id)chatMsgContainer.scrollTop(chatMsgContainer[0].scrollHeight);}}}

我們看一下引用它的位置就會發(fā)現(xiàn)，無論是p2p消息還是Chanel消息，都會調(diào)用這個onReceiveMessage()方法。因此，大家可以通過修改onReceiveMessage實(shí)現(xiàn)自己的聊天記錄功能。具體是通過接口存儲到我們自己的服務(wù)器，還是借助localStorage，都可以比較好的實(shí)現(xiàn)web端的聊天記錄功能。諸如?window.localStorage.setItem('msglog',msgs)。

既然可以暫時保存在localStorage，那么，想導(dǎo)出聊天數(shù)據(jù)為json，csv也不會麻煩到哪里去。

可能會遇到的問題

1.npm?install?報錯。

解決方法：?更換倉庫地址;?使用yarn?install;?使用vpn

2.可以發(fā)送消息，但是收不到消息。

解決方法：檢查asset目錄和static目錄，是否存在AgoraSig.js?,如果不存在，從sdk的lib目錄中復(fù)制并重命名為AgoraSig.js

總結(jié)

總體來說，基于Agora信令實(shí)現(xiàn)聊天室非常簡單，基于demo，自己擴(kuò)展一些用戶管理業(yè)務(wù)就可以實(shí)現(xiàn)。大家可以集中精力優(yōu)化交互體驗，美化UI，專注于端上業(yè)務(wù)。但是，如果想要更多的可控權(quán)，希望在server端實(shí)現(xiàn)聊天記錄之類的功能。基于信令當(dāng)前版本做這類功能，需要自己來開發(fā)。信令的優(yōu)勢在于，方便實(shí)現(xiàn)一些消息通知的場景。而且對接非常容易，只要簡單封裝即可直接嵌入端上。另外，對于彈幕的實(shí)現(xiàn)，大家可以嘗試在端實(shí)發(fā)送消息是同時推送消息到保存消息的接口。

總結(jié)

以上是生活随笔為你收集整理的聊天室应用开发实践（二）：实现基于 Web 的聊天室的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。