webSocket简单实现

最新推荐文章于 2020-06-19 18:58:04 发布

VIPLemon

最新推荐文章于 2020-06-19 18:58:04 发布

阅读量322

点赞数

文章标签： websocket

本文链接：https://blog.csdn.net/JavasLemon/article/details/106713452

版权

webSocket简单实现

1。前端实现

Document

//连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML(“WebSocket连接发生错误”);
};

//连接成功建立的回调方法
websocket.onopen = function () {
setMessageInnerHTML(“WebSocket连接成功”);
}

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

//连接关闭的回调方法
websocket.onclose = function () {
setMessageInnerHTML(“WebSocket连接关闭”);
}

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

//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById(‘message’).innerHTML += innerHTML + ‘
’;
}

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

//发送消息
function send() {
var message = document.getElementById(‘text’).value;
websocket.send(message);
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
Welcome<br/><input id="text" type="text"/>
<button onclick="send()">发送消息</button>
<hr/>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr/>
<!--时钟-->
<div id="clockdiv">
    <canvas id="dom" width="200" height="200">您的浏览器不兼容canvas</canvas>
</div>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/zouwangblog/Clock.js"></script>
<hr/>

<div id="message"></div>
</body>
<script>
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://127.0.0.1:8096/websocket/im/15175581718");
}
else {
alert('当前浏览器 Not support websocket')
}

//连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket连接发生错误");
};

//连接成功建立的回调方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket连接成功");
}

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

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

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
closeWebSocket();
}
 
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
 
//关闭WebSocket连接
function closeWebSocket() {
websocket.close();
}
 
//发送消息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>

2.java代码实现

package com.springboot.im.websocket;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.*;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.TimeoutException;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import com.springboot.utils.im.SpringUtil;
import org.apache.commons.lang.StringUtils;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.stereotype.Component;

/**
 * @author zhengkai.blog.csdn.net
 */
@ServerEndpoint("/imserver/{userId}")
@Component
public class WebSocketServer {



    static Log log = LogFactory.getLog(WebSocketServer.class);


    /**
     * 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
     */
    private static int onlineCount = 0;
    /**
     * concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
     */
    private static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>();
    /**
     * 与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    private Session session;
    /**
     * 发送者userId
     */
    private String fromUserId = "";


 


    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String fromUserId) throws IOException {
        this.session = session;
        this.fromUserId = fromUserId;
        if (webSocketMap.containsKey(fromUserId)) {
            webSocketMap.get(fromUserId).session.close();
            //加入set中
        } else {
            addOnlineCount();

            //在线数加1
        }
        webSocketMap.put(fromUserId, this);
 
        log.info("用户连接:" + fromUserId + ",当前在线人数为:" + getOnlineCount());
        try {
            sendMessage("连接成功");
            //启动MQ-订阅
            getMsg(fromUserId);


        } catch (IOException e) {
            log.error("用户:" + fromUserId + ",网络异常!!!!!!");
        } catch (InterruptedException e) {
            e.printStackTrace();
        } catch (TimeoutException e) {
            e.printStackTrace();
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        if (webSocketMap.containsKey(fromUserId)) {
            webSocketMap.remove(fromUserId);
            //从set中删除
            subOnlineCount();
      
        }
        log.info("用户退出:" + fromUserId + ",当前在线人数为:" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
  
                        sendMessage("发送");
            
    }

    /**
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("用户错误:" + this.fromUserId + ",原因:" + error.toString());
        error.printStackTrace();
    }

    /**
     * 实现服务器主动推送
     */
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }


}