微信小程序 聊天室簡(jiǎn)單實(shí)現(xiàn)
微信小程序 聊天室簡(jiǎn)單實(shí)現(xiàn)
utils文件夾下websoctet.js文件
var url = 'ws://地址端口';
function connect(user, func) {
wx.connectSocket({
url: url,
header: {"content-type":'application/x-www-form-urlencoded'}
});
wx.onSocketOpen(function (res) {
send('{"type":"login","client_name":"'+user.nickName+'","room_id":"1"}')
});
//接受消息
wx.onSocketMessage(func);
}
//發(fā)送消息
function send(msg) {
wx.sendSocketMessage({ data: msg });
}
module.exports = {
connect: connect,
send: send
}
具體頁(yè)面.js文件內(nèi)容:
var websocket = require('../../utils/websocket.js');
//事件處理函數(shù)
add: function (e) {
websocket.send('{"type":"say","from_client_id":"'+user.nickName+'","to_client_id":"all","content":"'+this.data.message+'"}')
},
onLoad: function () {
var that = this
//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function (userInfo) {
user = userInfo;
websocket.connect(user, function (res) {
text = that.encodeStr(res.data) + "\n";
console.log(res)
that.setData({
text: text
});
// websocket.send('{"type":"pong"}');
})
})
},
下面方法很好玩,因?yàn)槭褂玫姆?wù)器 是開源的PHP服務(wù)器,所以微信小程序接收到的聊天室中文內(nèi)容是ASCII編碼,所以經(jīng)過此方法可以轉(zhuǎn)換。
encodeStr: function (str) {
var character = str.split("\\u");
var native1 = character[0];
for (var i = 1; i < character.length; i++) {
var code = character[i];
native1 += String.fromCharCode(parseInt("0x" + code.substring(0, 4)));
if (code.length > 4) {
native1 += code.substring(4, code.length);
}
}
return native1
},
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
umi插件開發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)頁(yè)面布局詳解
這篇文章主要為大家介紹了umi插件開發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)頁(yè)面布局詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
前端AI機(jī)器學(xué)習(xí)在瀏覽器中訓(xùn)練模型
這篇文章主要為大家介紹了前端AI機(jī)器學(xué)習(xí)在瀏覽器中訓(xùn)練模型的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
前端可視化搭建組件值與聯(lián)動(dòng)實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了前端可視化搭建組件值與聯(lián)動(dòng)實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05
微信小程序?qū)崿F(xiàn)給循環(huán)列表添加點(diǎn)擊樣式實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)給循環(huán)列表添加點(diǎn)擊樣式實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04
微信小程序 數(shù)據(jù)遍歷的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 數(shù)據(jù)遍歷的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-04-04
深入講解JavaScript之繼承的多種方式和優(yōu)缺點(diǎn)
本文講主要解JavaScript各種繼承方式和優(yōu)缺點(diǎn),文章將六種繼承方式說明,分別有原型鏈繼承、借用構(gòu)造函數(shù)(經(jīng)典繼承)、組合繼承、原型式繼承、寄生式繼承、 寄生組合式繼承,這六種方式,需要的朋友可以參考一下2021-10-10
微信小程序promsie.all和promise順序執(zhí)行
這篇文章主要介紹了微信小程序promsie.all和promise順序執(zhí)行的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-10-10

