上次遇开发一个聊天的项目,遇到一个问题,用的是websocket开发的聊天项目,但是有一个问题就是,websocket文件是单独一个js文件,如图所示,websocket文件就是写的和服务器交互的聊天文件,但是我的聊天页面是在newChat文件夹里面的。对了 这是一个微信小程序。有一个问题就是
大家了解一下socket就知道,里面有一个监听方法,就是onSocketMessage方法,这个方法当你的好友发送信息的时候,它会收到这条信息,当你主动发一条信息的时候,你加载聊天信息的时候,你可以读一次信息,加载出来,但是当你的朋友给你发送信息的时候,你可以收到,但是你页面怎么取加载呢?总不能每两秒去缓存或者本地加载一次吧!这时候就需要一个监听方法,当好友给你发送信息的时候,这个监听通知你去onSocketMessage方法里面加载传过来的信息!所以我就自己封装了一个方法,实现监听。原理就是当有信息过来的时候,通知你去回调一次加载数据的方法!用的就是回调函数啦!就是图上面的event.js方法。下面我把代码给一下:
var _handle = Object.create(null);
/**
* 绑定监听事件
* @param {*String} type 绑定事件类型
* @param {*Function} callback 事件处理函数
* @param {*Object} target 事件处理函数执行的上下文环境
*/
function $on(type, callback, target) {
_handle[type] = _handle[type] || [];
_handle[type].push({ callback: callback, target: target, once: false });
}
/**
* 移除监听事件
* @param {*Stirng} type 移除事件类型
* @param {*Function} callback 事件处理函数
* @param {*Object} target 事件处理函数执行的上下文环境
*/
function $off(type, callback, target) {
if (_handle[type] && _handle[type].length !== 0) {
for (var i = _handle[type].length - 1; i >= 0; i--) {
if (callback === _handle[type][i].callback && target === _handle[type][i].target) {
_handle[type].splice(i, 1);
}
}
}
}
/**
* 触发指定事件类型的监听
* @param {*String} type 触发事件类型
* @param {*Object} params 传递数据
*/
function $fire(type, params) {
if (_handle[type] && _handle[type].length !== 0) {
for (var i = _handle[type].length - 1; i >= 0; i--) {
_handle[type][i].callback.call(_handle[type][i].target, params);
if (_handle[type][i].once) {
_handle[type].splice(i, 1);
}
}
}
}
function $stro(type, params) {
if (_handle[type] && _handle[type].length !== 0) {
for (var i = _handle[type].length - 1; i >= 0; i--) {
_handle[type][i].callback.call(_handle[type][i].target, params);
if (_handle[type][i].once) {
_handle[type].splice(i, 1);
}
}
}
}
module.exports = {
$on: $on,
$off: $off,
$fire: $fire,
$stro: $stro,
}
上面 on方法就在需要加载数据的地方写,fire就是主动触发的地方;
$on('custom-chat-event', (data) => {
console.log("监听成功")
wx.getStorage({
key: that.data.gId,
success: function (res) {
console.log("数据是" + res.data);
var scrollTop = that.data.scrollTop;
var nowHeight = that.data.nowHeight;
var nowTop = that.data.nowTop;
var sssss = parseInt(scrollTop);
console.log(new Date());
that.setData({
chatMsg: res.data.recordList,
scrollTop: sssss + 1
})
}
})
});
fire:
wx.setStorage({
key: stoKey,
data: da,
success() {
$fire('custom-chat-event')
}
})
就这样的,至于括号里面的custom-chat-event是什么,其实就是两个方法的一个协议而已!必须写一样才会触发,大概就是这样,这是在小程序里面的写法,在web开发的时候写法不一样的,我下面吧代码上传一下,有需要的也可以留下你的邮箱
git地址:https://github.com/AndriodStudent/event