基于WebSocket的网页端即时通讯

最新推荐文章于 2024-07-29 02:19:46 发布

AaronHao1

最新推荐文章于 2024-07-29 02:19:46 发布

阅读量1.3w

点赞数 9

分类专栏： Java/webSocket 文章标签： websocket 即时通讯浏览器推送浏览器聊天室demo

本文链接：https://blog.csdn.net/shijiemozujiejie/article/details/78583514

版权

Java/webSocket 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基于WebSocket的网页端即时通讯

最近项目中需要用到一些即时通讯的相关技术，查阅了一些资料后发现有些示例不是让人很满意，所以博主写了一个demo，就怕以后会忘掉，也方便博友查看。

由于博主用的是SSM（springMVC+spring+MyBatis）框架，所以肯定要首选spring自带的WebSocket了。

我们先看一下最终实现的效果。
这里写图片描述

1、这里两个用户用的接口分别是：http://localhost:8090/myProject/demo/webSocketTest/user001
表示user001用户，http://localhost:8090/myProject/demo/webSocketTest/user002表示user002用户。下面的controller里会讲到模拟登录。

这里写图片描述

2、当user002用户断开连接时，再想user002用户发送消息时显示user002用户不在线！

这里写图片描述

3、当user002用户再次连接时，两个用户又可以进行通讯了。

代码实现

1、初始页面的controller

package com.jh.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * webSocketDemo
 * @author JiHao
 *
 */
@Controller
@RequestMapping(value = "/demo")
public class MyWebSocketController {

    /**
     * @param userId 模拟登录，登录的用户名称
     */
    @RequestMapping(value = "/webSocketTest/{userId}")
    public String test(@PathVariable("userId") String userId, Model model) throws Exception {
        //把登录名称传给jsp页面
        model.addAttribute("userId", userId);
        return "demo/test";
    }

}

2、初始页面的jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <script type="text/javascript">  
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8090/myProject/websocketTest/" + '${userId}');
        console.log("link success");
    }else{
        alert('Not support websocket');
    }

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

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("open");
    };
    //接收到消息的回调方法
    websocket.onmessage = function(event){
        console.log(event.data);
        setMessageInnerHTML(event.data);
    };

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

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

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('returnMessage').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket(){
        websocket.close();
        document.getElementById('send').disabled = true;
        document.getElementById('close').disabled = true;
        document.getElementById('connect').disabled = false;
    }

    //发送消息
    function send(){
        //接收者名称
        var toName = document.getElementById('toName').value;
        if('' == toName){
            alert("请填写接收者");
            return;
        }
        //发送的消息
        var message = document.getElementById('message').value;
        if('' == message){
            alert("请填写发送信息");
            return;
        }
        websocket.send(toName+"-f,t-"+message);
    }

    function connect() {
        //判断当前浏览器是否支持WebSocket
        if('WebSocket' in window){
            websocket = new WebSocket("ws://localhost:8090/myProject/websocketTest/" + '${userId}');
            console.log("link success");
            document.getElementById('send').disabled = false;
            document.getElementById('close').disabled = false;
            document.getElementById('connect').disabled = true;
        }else{
            alert('Not support websocket');
        }

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

        //连接成功建立的回调方法
        websocket.onopen = function(event){
            setMessageInnerHTML("open");
        };
        //接收到消息的回调方法
        websocket.onmessage = function(event){
            console.log(event.data);
            setMessageInnerHTML(event.data);
        };

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

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

  <body>
        webSocket Demo---- ${userId} <br />
        发送给谁：<input id="toName" type="text" /><br>
        发送内容：<input id="message" type="text" /><br>
        <button id="send" onclick="send()"> Send </button>   
        <button id="close" onclick="closeWebSocket()"> Close </button>
        <button id="connect" onclick="connect();" disabled="disabled">Connect</button>
        <div id="returnMessage"></div>
  </body>
</html>

这里我把自己写的jsp代码全都复制了过来，仅供参考。
浏览器加载时调用的几个重要的WebSocket API示例
if(‘WebSocket’ in window){
websocket = new WebSocket(“ws://localhost:8090/myProject/websocketTest/” + ‘${userId}’);
console.log(“link success”);
}else{
alert(‘Not support websocket’);
}
websocket.onopen = function(){setMessageInnerHTML(“open”);};
websocket.onmessage = function(evt){setMessageInnerHTML(event.data);};
websocket.onclose = function(){setMessageInnerHTML(“close”);};
websocket.onerror = function(){setMessageInnerHTML(“error”);};
window.onbeforeunload = function(){websocket.close();};
浏览器中用到的几个重要的方法
1、function send(){} 发送消息的方法
2、function closeWebSocket(){} 关闭连接的方法
3、function connect(){} 重新建立连接的方法

3、创建@ServerEndpoint注解类

package com.jh.util.websocket;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;

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;

/**
 * MyWebSocket
 * @author JiHao
 *
 */
@ServerEndpoint(value = "/websocketTest/{userId}")
public class MyWebSocket {

    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;

    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。但为了实现服务端与单一客户端通信，用Map来存放，其中Key可以为用户标识
    private static CopyOnWriteArraySet<Map<String, MyWebSocket>> mapSocket = new CopyOnWriteArraySet<Map<String, MyWebSocket>>();
    private static CopyOnWriteArraySet<Map<String, Session>> mapSession = new CopyOnWriteArraySet<Map<String, Session>>();

    //当前用户
    private String userId;

    /**
     * 连接时执行
     * @param userId 当前用户名称
     * @param session 当前用户session
     * @throws Exception
     */
    @OnOpen
    public void onOpen(@PathParam("userId") String userId,Session session) throws Exception {
        //存放当前用户的MyWebSocket对象
        Map<String, MyWebSocket> wsSocket = new HashMap<String, MyWebSocket>();
        //用map建立用户和当前用户的MyWebSocket对象关系
        wsSocket.put(userId, this);
        mapSocket.add(wsSocket);
        //存放当前用户的session对象
        Map<String, Session> wsSession = new HashMap<String, Session>();
        //用map建立用户和当前用户的session对象关系
        wsSession.put(userId, session);
        mapSession.add(wsSession);
        //在线数加1
        addOnlineCount();           
        this.userId = userId;
        System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
    }

    /**
     * 关闭时执行
     */
    @OnClose
    public void onClose(){
        //删除当前用户的MyWebSocket对象和session对象,并且人数减1
        removeCurrentUser();
        System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到消息时执行
     */
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        System.out.println("来自客户端的消息:" + message);
        String[] messages = message.split("-f,t-");
        //接收者名称
        String toName = messages[0].trim();
        //发送给接收者的信息
        String toMessage = 1 >= messages.length ? "" : messages[1];
        //用户判断接收者是否存在
        boolean flag = false;
        //发消息
        for(Map<String, MyWebSocket> item: mapSocket){             
            try {
                for (String key : item.keySet()) {
                    if(toName.equals(key)){
                        flag = true;
                        MyWebSocket myWebSocket = item.get(key);
                        myWebSocket.sendMessage(key, toMessage);
                    }
                }
            } catch (IOException e) {
                e.printStackTrace();
                continue;
            }
        }
        if(!flag){
            session.getBasicRemote().sendText(toName + "用户不在线！"); //回复用户
        }
//        //这里注释掉的内容是群发消息
//        for(Map<String, MyWebSocket> item: mapSocket){             
//            try {
//              for (String key : item.keySet()) {
//                  MyWebSocket myWebSocket = item.get(key);
//                  myWebSocket.sendMessage(key, toMessage);
//              }
//            } catch (IOException e) {
//                e.printStackTrace();
//                continue;
//            }
//        }
    }

    /**
     * 发送消息。
     * @param message
     * @throws IOException
     */
    public void sendMessage(String toName, String toMessage) throws IOException{
        for(Map<String, Session> item: mapSession){             
            try {
                for (String string : item.keySet()) {
                    if(toName.equals(string)){
                        Session toSession = item.get(string);
                        toSession.getBasicRemote().sendText(toMessage);
                    }
                }
            } catch (IOException e) {
                e.printStackTrace();
                continue;
            }
        }
    }

    /**
     * 删除当前用户的MyWebSocket对象和session对象,并且人数减1
     */
    public void removeCurrentUser(){
        //删除当前用户的WebSocket
        for(Map<String, MyWebSocket> item: mapSocket){             
            for (String string : item.keySet()) {
                if(userId.equals(string)){
                    mapSocket.remove(item);
                }
            }
         }
        //删除当前用户的session
        for(Map<String, Session> item: mapSession){             
            for (String string : item.keySet()) {
                if(userId.equals(string)){
                    mapSession.remove(item);
                }
            }
         }
        //在线数量减1
        subOnlineCount();
    }

    /**
     * 连接错误时执行
     */
    @OnError
    public void onError(Session session, Throwable error){
        System.out.println("用户id为：{}的连接发送错误" + this.userId);
        error.printStackTrace();
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized void addOnlineCount() {
        MyWebSocket.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        MyWebSocket.onlineCount--;
    }

}

这些代码可以复制直接使用，博主已经调试过了，代码里也做了相应的注释，博友可以仔细查看。
@ServerEndpoint注解类中主要使用的几个注解方法的监听函数
1、@OnOpen 当网络连接建立时触发该事件
2、@OnMessage 接收到服务器发来的消息的时触发的事件，也是通信中最重要的一个监听事件。
3、@OnClose 当websocket被关闭时触发该事件
4、@OnError 当websocket当网络发生错误时触发该事件

博主的这篇demo博文写的比较简单，如果有博友看的不是很清楚的，这里提供一个参考地址：
https://www.cnblogs.com/davidwang456/p/4786636.html