首页 > Web开发 > 详细

通过实现简单聊天室了解websocket的基础使用

时间:2020-03-14 10:56:57      阅读:74      评论:0      收藏:0      [点我收藏+]

websocket基础使用

用到的依赖包
  • websocket的依赖

    <dependency>
      <groupId>javax.websocket</groupId>
        <artifactId>javax.websocket-api</artifactId>
        <version>1.1</version>
        <scope>provided</scope>
    </dependency>
  • json-lib的依赖

    <dependency>
      <groupId>net.sf.json-lib</groupId>
        <artifactId>json-lib</artifactId>
        <version>2.4</version>
    </dependency>
    服务端代码实现
  • 服务端需要Servlet3.0的注解

    @ServerEndpoint("/websocket/{name}") : 用于标记该类为websocket服务端类

    name用于记录当前websocket是谁,用于区分连接的用户

    servlet是单例对象,websocket是多里对象,因为他需要实时连接,与要知道每个连接是谁
    (解释都在注释里,不多赘述)

    public class WebSocket {
        private String name;//用于记录当前websocket是谁,用于区分连接的用户
        private Session session; //webSocket中的session 链接,用于记录当前的连接
    
        private static Map<String,WebSocket> allClients = new HashMap<>();
    
        public Session getSession(){
            //...
        }
    
        public void setSession() {
            //...
        }
    
        /**
          *
          * @param name 嗲表地址参数中的name
          * @param session 当前建立的链接
          */
        @OnOpen  //标志建立连接的注释
        public void openConnection(@PathParam("name") String name,Session session){
            this.name = name;
            this.session = session;
            allClients.put(name,this);//将name与webSocket绑定
        }
    
        /**
          * 当服务器接受到消息时触发
          * @param message 
          * @param session 当前建立的链接
          */
        @OnMessage //用于接收客户端发来的消息,这个地方应该根据自己的实际业务需求,来决定到底写什么
        public void onMessage(Session session,String message) {
            //1.首先解析发过来的内容,找到目标接收者:通过名字找到名字对应的websocket对象,获取websocket对象中的session,创建一个固定容器用于存放对应key-value值:String-WebSocket
            JSONObject jsonObject  JSONObject.fromObject(message);
    
            //与前端约定,接收者为toUser,发送信息内容为toMessage
            String to = jsonObject.getString("toUser");//找到接收者
            String toMessage = jsonObject.getString("toMessage");//获取到发送的内容
            //2.根据目标接收者,找到它的session链接
            WebSocket webSocket = allClients.get(to);//获取到目标接收者的webSocket
            //3.通过session发消息
            if(WebSocket != null){
                Session toSession = webSocket.getSession();//获取到服务器和目标接收者的链接
              if(toSession.isOpen()) {
                    //toSession为要发送的目标者,getAsyncRemote获得链接的相对的另一端
                    toSession.getAsyncRemote().sendText(toMessage);
                }
            }else {
                //正常来说应该缓存这个消息,这里我就直接发送留言,对方不在线
                session.getAsyncRemote().sendText("对方不在线");
            }
    
        }
    
        /**
          * 当服务器发生异常时触发
          * @param e 可抛出的异常
          * @param session 哪个链接出现了异常
          */
        @OnError
        public void onError(Session session,Throwable e) {
    
        }
    
        /**
          * 当链接关闭的时候触发
          * @param e 可抛出的异常
          * @param session 哪个链接出现了异常
          */
        @OnClose
        public void onClose(Session session){
    
        }
    
    }
    客户端js代码
    var websocket = null;
    
    //-------------===客户端获取websocekt链接===-----------------
    function connection(){
        var username="";//对应服务端的name TODO:更具具体情况获得一个username用于表示当前的链接
        //首先判断当前浏览器是否支持websocket
        if('WebSocket' in window) {
            //创建websocket
            websocket = new WebSocket("ws://"+document.location.host+"/websocket"+username);
        }else{
            alert('当前浏览器不支持websocket');
        }
    
        //建立链接的回调
        websocket.onopen = function() {
            console.log("链接建立了")
        }
    
        //收到消息时
        websocket.onmessage = function(event) {
              //获得消息,并打印
            console.log(event.data)
        }
    
        websocket.onerror = function() {
            console.log("出现异常了")
        }
    
        websocket.onclose = function() {
            console.log("链接关闭了")
        }
    
        //当浏览器的页面窗口关闭的时候,此时应该关闭链接,防止服务器出现异常
        window.onbeforeunload = = function() {
            if (websocket!=null){
                websocket.close();
            }
        }
    }
    
    //------------==发送消息==-----------
    function sendMessage(){
        //1.获取到发送给谁
        var toUser = "";//Dom操作,此处省略了
        //2.获取到发送的内容
        var toMessage = ""//Dom操作,此处省略了
    
        if(websocket!=null) {
              //拼json串
            var message = "{'toUser':"+toUser+","+"'toMessage':"+toMessage+"}";】
            //发送json串
            websocket.send(message);
        }
    }

通过实现简单聊天室了解websocket的基础使用

原文:https://www.cnblogs.com/leyvan/p/12490182.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!