Servlet WebSocket的简易聊天室 - 诉说静风

添加依赖

        <!-- websocket -->
        <dependency>
            <groupId>javax.websocket</groupId>
            <artifactId>javax.websocket-api</artifactId>
            <version>${websocket.version}</version>
            <scope>provided</scope>
        </dependency>

ChatServer后台类

package edu.nf.ws.server;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.sql.Time;
import java.util.Date;
import java.util.Set;

/**
 * @Author Eric
 * @Date 2018/12/5
 * WebSocket服务端
 */
@ServerEndpoint("/chat/server/{userName}")
public class ChatServer {
    /**
     * 当有客户端连接到服务端的时候就会调用这个方法
     * session代表客户端和服务端的一个连接会话对象，
     * 由容器负责创建和维护
     * @param session
     * @param userName
     */
    @OnOpen
    public void onOpen(Session session,@PathParam("userName") String userName) throws UnsupportedEncodingException {
        //userName=URLDecoder.decode(userName,"UTF-8");
        System.out.println("有客户端连接..."+userName);
        //将用户名保存到当前用户会话的属性中（有点类似作用域的概念）
        session.getUserProperties().put("user",userName);
    }

    /**
     * 客户端和服务器之间通信的方法，
     * 服务端每当接收客户端的消息就会调用这个方法
     * 注意：必须制定一个String类型的参数，表示接收到客户的文本消息
     * @param message
     * @param session
     */
    @OnMessage
    public void onMessage(String message,Session session) throws IOException {
        System.out.println("接收消息..."+message);
        //将消息发给所有人
        sendAllUser(message,session);
    }

    /**
     * 当客户端关闭或者断开连接时，服务端会调用此方法
     */
    @OnClose
    public void onClose(Session session) throws IOException {
        System.out.println("客户失去连接...");
        session.close();
    }
    private void sendAllUser(String message,Session session) throws IOException {
        //获取所有人的会话对象
        Set<Session> users = session.getOpenSessions();
        //获取发送人
        String sendUser = session.getUserProperties().get("user").toString();
        //发送给所有人
        for (Session user : users) {
            user.getBasicRemote().sendText(getTime()+"<br/>"+sendUser+":"+message);
        }
    }
    private Time getTime(){
        //创建当前时间
        Date date = new Date();
        Time time = new Time(date.getTime());
        return time;
    }
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易对话</title>
</head>
<body>
    <div id="login_div">
        用户名：<input type="text" id="userName" name="userName"/>
        <input type="button" id="login" value="login"/>
    </div>

    <div id="container" style="display: none">
        <div id="content"></div>
        <input type="text" id="msg" name="msg"/>
        <input type="button" id="send" value="send"/>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            var ws;
            //登陆
            $("#login").on("click",function () {
                var userName = $("#userName").val();
                //创建WebSocket对象并连接服务端
                ws = new WebSocket('ws://localhost:8080/chat/server/'+userName);
                //客户端打开连接时会回调此方法
                /*ws.onopen = function(){
                    //...
                }*/

                //客户端关闭或断开连接时执行此方法
                /*ws.onclose = function(){
                    //...
                }*/
                //接收服务端发送的信息
                ws.onmessage =function (message) {
                    $("#content").append(message.data+"<br/>")
                }
                $('#login_div').css('display','none');
                $('#container').css('display','block');
            });
            //发送信息
            $("#send").on('click',function () {
                var msg = $('#msg').val();
                //发送消息
                ws.send(msg);
            });
        });
    </script>
</body>
</html>

posted on 2018-12-05 19:34 诉说静风阅读(1251) 评论(0) 编辑收藏举报

刷新页面返回顶部