基于thinkjs的简单聊天室实现

thinkjs内置了对websocket的支持,所以要实现聊天室的话非常简单。

Controller里代码

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 = {
 '<': '<',
 '>': '>',
 '"': '&quote;',
 "'": '&#39;'
 }
 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
 }))
 })
 })
})

DEMO

具体示例可以看这里

w3ctech微信

扫码关注w3ctech微信公众号

共收到9条回复

  • 欢迎交流学习

    回复此楼
  • +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方法的么?

    回复此楼
  • @老六 实例看不了了

    回复此楼

AltStyle によって変換されたページ (->オリジナル) /