thinkjs内置了对websocket的支持,所以要实现聊天室的话非常简单。
module.exports = Controller(function(){
//websocket列表
var wsList = {};
setInterval(function(){
for(var id in wsList){
wsList[id].send({
name: '机器人',
text: '每隔10秒我就发一条消息哦'
})
}
}, 10000)
return {
indexAction: function(){
this.display();
},
/**
* 建立连接
* @return {[type]} [description]
*/
openAction: function(){
var websocket = this.http.websocket;
var id = websocket.id;
for(var wid in wsList){
wsList[wid].send({
name: '系统',
text: 'id_' + id + '进入了聊天室'
});
}
wsList[id] = websocket;
this.http.on("websocket.close", function(){
console.log('close')
delete wsList[id];
for(var wid in wsList){
wsList[wid].send({
name: 'id_' + id,
text: 'goodbye~~'
});
}
})
},
/**
* 获取到消息
* @return {[type]} [description]
*/
messageAction: function(){
var data = this.get();
data.name = 'id_' + this.http.websocket.id;
data.wslength = Object.keys(wsList).length;
//有消息后向所有人广播
for(var id in wsList){
wsList[id].send(data);
}
}
}
})
$(function(){
var htmlMaps = {
'<': '<',
'>': '>',
'"': '"e;',
"'": '''
}
var escape_html = function (str) {
return (str + "").replace(/[<>'"]/g, function(a){
return htmlMaps[a];
})
}
function getWebSocket(){
var socket = new WebSocket("ws://" + location.hostname + ":1234/test/websocket/open");
var deferred = $.Deferred();
// 打开Socket
socket.onopen = function(event) {
$('<div class="alert alert-success">连接成功,开始聊天吧 ^_^</div>').appendTo(dataList);
deferred.resolve(socket);
// 监听消息
socket.onmessage = function(event) {
var data = JSON.parse(event.data).result;
console.log(data);
var html = '<div class="data-item"><span class="label label-primary">'+data.name+'</span> '
html += '<span>' + escape_html(data.text) + '</span></div>'
$(html).appendTo(dataList);
dataList[0].scrollTop = 100000000;
};
// 监听Socket的关闭
socket.onclose = function(event) {
socket = null;
console.log("websocket closed")
};
};
return deferred;
}
var ws = getWebSocket();
var dataList = $('.data-list');
var input = $('#textField').select();
$('#submitBtn').click(function(){
var value = input.val().trim();
if (!value) {
return input.focus();
};
ws.then(function(ws){
input.val('').focus();
ws.send(JSON.stringify({
jsonrpc: "2.0",
method: "/test/websocket/message",
params: {text: value},
id: 1
}))
})
})
})
具体示例可以看这里
扫码关注w3ctech微信公众号
欢迎交流学习
+1,实现起来代码好简洁!
thinkjs, woo~~~~~~
本地测试的时候,controller 里面的 wsList 在 messageAction 里面是空的 {},导致只能收到服务推送的信息,不能显示自己提交的信息。比较奇怪,为什么 setInterval 里面的 wsList 有数据,而 messageAction 里面总是{} 。
搞明白了。需要把 /www/index.js 里面的 global.APP_DEBUG = true; 设置为 global.APP_DEBUG = false;
前端代码没贴出来我都弄不成功。。。。小白一个
TypeError: Cannot read property 'id' of undefined at openAction (C:\Users\kkkkk\new_dir_name\App\Lib\Controller\Home\WebsocketController.js:27:31) at C:\Users\kkkkk\new_dir_name\node_modules\thinkjs\lib\Lib\Core\App.js:110:30 at runMicrotasksCallback (node.js:337:7) at process._tickDomainCallback (node.js:381:11) 怎么解决
@q4323636 你是用websocket访问open方法的么?
@老六 实例看不了了
共收到9条回复