JavaWeb及时通讯网页聊天--7、前端后端交互

后台写完了,前台要用WebSocket连接后台,需要新建一个WebSocket对象,然后就可以和服务器端进行交互,从浏览器发送消息给服务器端,同时要验证输入框的内容是否为空,然后接受服务端发送的消息,把它们动态地添加到聊天内容框中。

记得写到文档就绪函数中

//自己的昵称
var nickname = "风清扬"+Math.random();
//建立一条与服务器之间的连接
var socket = new WebSocket("ws://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${pageContext.request.contextPath}/websocket");
//接收服务器的消息
socket.onmessage=function(ev){
    var obj = eval(   '('+ev.data+')'   );
    addMessage(obj)
}
//发送按钮被点击时
$("#send").click(function(){
    if (!um.hasContents()) {  // 判断消息输入框是否为空
        // 消息输入框获取焦点
        um.focus();
        // 添加抖动效果
        $('.edui-container').addClass('am-animation-shake');
        setTimeout("$('.edui-container').removeClass('am-animation-shake')", 1000);
    else {
        //获取输入框的内容
        var txt = um.getContent();
        //构建一个标准格式的JSON对象
        var obj = JSON.stringify({
            nickname:nickname,
            content:txt
        });
        // 发送消息
        socket.send(obj);
        // 清空消息输入框
        um.setContent('');
        // 消息输入框获取焦点
        um.focus();
    }
});

到这步,简单的网页聊天室就完成了,你可以多开几个窗口或在局域网中邀请小伙伴们来一起测试。