基于Nodejs的thinkjs简单聊天室实现

基于Nodejs的ThinkJS简单聊天室实现

由于ThinkJS内置了对WebSocket的支持，因此实现一个简单的聊天室变得非常容易。本文将展示如何使用ThinkJS来构建一个基本的聊天室应用，包括服务端和客户端的代码。

服务端代码

首先，我们来看一下服务端的代码。ThinkJS内置了WebSocket支持，使得我们可以轻松地处理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();
        },

        /**
         * 建立连接
         */
        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;

            // 处理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~~'
                    });
                }
            });
        },

        /**
         * 获取到消息
         */
        messageAction: function(){
            var data = this.get();
            data.name = 'id_' + this.http.websocket.id;
            data.wslength = Object.keys(wsList).length;

            // 向所有连接的WebSocket广播消息
            for(var id in wsList){
                wsList[id].send(data);
            }
        }
    }
});

客户端代码

接下来，我们来看一下客户端的代码。客户端主要负责建立WebSocket连接、发送和接收消息，并且将接收到的消息显示在页面上。

$(function(){
    var htmlMaps = {
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#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.alert-success').text('连接成功，开始聊天吧 ^_^').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> ' +
                           '<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
            }));
        });
    });
});

总结

通过上述代码，我们可以看到使用ThinkJS实现一个简单的聊天室是非常方便的。服务端主要处理WebSocket的连接、关闭以及消息广播，而客户端则负责与服务器进行通信并更新UI。这种方式不仅简洁高效，还能够满足基本的聊天需求。