评论功能+websocket自动更新

本文档介绍了如何使用WebSocket技术实现评论功能的自动更新。主要包括comment.jsp页面与comment.js的交互,以及WebSocket客户端(PubCommentWebSocketClient.java, PubCommentWebSocketThread.java)与服务器端(WebSockertFilter.java, PubCommentServer.java, PubCommentServerPool.java)的通信流程。在用户发送评论后,通过分页函数paging()处理,并在配置文件中设置WebSocket端口。" 106113907,9202467,因果推断在用户增长中的应用——阿里文娱案例,"['推荐算法', '用户增长策略', '数据驱动营销', '内容分发', '会员转化']
摘要由CSDN通过智能技术生成

代码存根,作为文档保存。

1、comment.jsp 页面

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="report_comment">
            <p class="bt_report"><i class="iconfont icon-pinglun"></i><font>发表评论</font></p>
            <div class="report_text">
                <div class="pull-left width10 loginPhoto">
                    <img alt="" class="img-circle" src="">
                </div>
                <div class="pull-left chearfix width_calc90">
                    <textarea rows="4" cols="5" class="form-control" id="comment" placeholder="来说两句吧…" style="resize:none;"></textarea>
                </div>
                <div class="text-right btn-report"><button class="btn btn-default btn-box-custom" onclick="sendComment()">发表</button></div>
            </div>
        </div>

        <div class="all_commentList">
            <p>全部评论 <font style="font-size: 14px;color: #888;" id="commentSum"></font></p>

            <table class="table" id="commentTable">


            </table>

            <table style="width: 100%">
                <tr>
                    <td align="center">
                        <ul class="pagination" id="ulpage">

                        </ul>
                    </td>
                </tr>
            </table>

            <!-- <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="show_more_comments">
                        <center>查看更多评论</center>
                    </div>
                </div>
            </div> -->

        </div>

    </div>
</div>


<script src="${ctxStatic}/web/js/comment/comment.js"
        type="text/javascript"></script>

    <script type="text/javascript">
        //与服务器websocket连接
        $(document).ready( function() {
    
            var websocket = null;

            //判断当前浏览器是否支持WebSocket  
            if ('WebSocket' in window) {
                websocket = new WebSocket(
                        "${fns:getConfig('PUBCOMMENTWEBSOCKET')}");
            } else {
                showTip("未提供websocket服务!");
            }

            //连接发生错误的回调方法  
            websocket.onerror = function() {
    
                console.log("error");
                showTip("websocket连接失败,不能即时更新评论信息!");
            };

            //连接成功建立的回调方法  
            websocket.onopen = function(event) {
    
                websocket.send("commentId: "+articleId+",loginId: " + _uid); //将连接信息与登陆账号绑定
            }

            //接收到消息的回调方法  
            websocket.onmessage = function(event) {
    
                var serverMessage = event.data;

                if (serverMessage.indexOf('updatePubComment-') != -1) {
                    data = serverMessage.replace("updatePubComment-", "");
                    if (data != null && data != "") {
                        data = JSON.parse(data);
                        var html = discussItem(data);
                        $(".all_commentList .table").prepend(html);
                        $("#comment").val("");
                    }

                } else if (serverMessage.indexOf('updateReplyComment-') != -1) {
                    var updateReplyComment = serverMessage.substring(0, serverMessage.indexOf("*"));
                    var id = serverMessage.substring(serverMessage.lastIndexOf("*") + 1);

                    id = id.replace("id-", "");
                    data = updateReplyComment.replace("updateReplyComment-", "");
                    if (data != null && data != "") {
                        data = JSON.parse(data);
                        var html = replyItem(data);
                        $(".all_commentList #conListShow"+id+" #"+id+" #replyData"+id).prepend(html);
                        $("#repleText").val("");
                    }
                }

            }

            //连接关闭的回调方法  
            websocket.onclose = function() {
    
                console.log("close");
            }

            //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。  
            window.onbeforeunload = function() {
    
                websocket.close();
            }

            //关闭连接  
            function closeWebSocket() {
    
                websocket.close();
            }

        })
    </script>

2、comment.js

var pageNo = 1;
var pageSize = 5; 

var pageNo_article = 1;
var pageSize_article = 5; 

var nodeId = "";
$(function(){
   
    //重新定义分页时页面绑定事件;
    reBind = function</
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值