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

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的基础使用

websocket基础使用

用到的依赖包

服务端代码实现

客户端js代码

最新文章

热门文章