springboot+websocket实现即兴聊天

最新推荐文章于 2024-05-27 15:11:32 发布

小小舍

最新推荐文章于 2024-05-27 15:11:32 发布

阅读量533

点赞数 1

分类专栏： spring boot

本文链接：https://blog.csdn.net/qq_43560721/article/details/106987812

版权

spring boot 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

demo结构：

demo主要页面：

webSocket.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>即兴聊天</title>
</head>
<body>
<h3>欢迎来到：即兴聊天</h3>
<button onclick="openSocket()">开始聊天</button>
<p>【Id】：
<div>
    <input id="userId" name="userId" type="text" value="10">
</div>
<p>【接收者Id】：
<div>
    <input id="toUserId" name="toUserId" type="text" value="20">
</div>
<p>【消息】：
<div>
    <input id="contentText" name="contentText" type="text" value="hello^-^">
    <button onclick="sendMessage()">发送消息</button>
</div>
<p>【消息记录】：
<div id="show-msg">

</div>
</body>
<script>


    var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            var userId = document.getElementById('userId').value;
            // var socketUrl="ws://127.0.0.1:22599/webSocket/"+userId;
            var socketUrl="ws://192.168.2.108:22599/webSocket/"+userId;
            console.log(socketUrl);
            if(socket!=null){
                socket.close();
                socket=null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function() {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                var serverMsg = "收到服务端信息：" + msg.data;
                document.getElementById('show-msg').innerHTML = serverMsg
                console.log(serverMsg);
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                console.log("websocket发生了错误");
            }
        }
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            // console.log("您的浏览器支持WebSocket");
            var toUserId = document.getElementById('toUserId').value;
            var contentText = document.getElementById('contentText').value;
            var msg = '{"toUserId":'+toUserId+',"contentText":"'+contentText+'"}';
            console.log(msg);
            socket.send(msg);
        }
    }

</script>
</html>

配置文件定义webSocket端口号

server.port=22599

WebSocketConfig

package cn.xxs.springbootwbsocketdemo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @Author xxs
 * @Date 2020/4/24 15:41
 */
@Configuration
public class WebSocketConfig {
    /**
     * ServerEndpointExporter 作用
     *
     * 这个Bean会自动注册使用@ServerEndpoint注解声明的websocket endpoint
     *
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

User

package cn.xxs.springbootwbsocketdemo.pojo;

/**
 * @Author xxs
 * @Date 2020/6/27 19:13
 */
public class User {
    private String toUserId;
    private String contentText;

    public String getToUserId() {
        return toUserId;
    }

    public void setToUserId(String toUserId) {
        this.toUserId = toUserId;
    }

    public String getContentText() {
        return contentText;
    }

    public void setContentText(String contentText) {
        this.contentText = contentText;
    }
}

WebSocketServer

package cn.xxs.springbootwbsocketdemo.service;

import cn.xxs.springbootwbsocketdemo.pojo.User;
import com.alibaba.fastjson.JSON;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Enumeration;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * @Author xxs
 * @Date 2020/4/24 15:44
 */
@ServerEndpoint("/webSocket/{sid}")
@Component
public class WebSocketServer {
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static AtomicInteger onlineNum = new AtomicInteger();

    //concurrent包的线程安全Set，用来存放每个客户端对应的WebSocketServer对象。
    private static ConcurrentHashMap<String, Session> sessionPools = new ConcurrentHashMap<>();

    //发送消息
    public void sendMessage(Session session, String message) throws IOException {
        if(session != null){
            synchronized (session) {
//                System.out.println("发送数据：" + message);
                session.getBasicRemote().sendText(message);
            }
        }
    }
    //给指定用户发送信息
    public void sendInfo(String userName, String message){
        Session session = sessionPools.get(userName);
        try {
            sendMessage(session, message);
        }catch (Exception e){
            e.printStackTrace();
        }
    }

    //建立连接成功调用
    @OnOpen
    public void onOpen(Session session, @PathParam(value = "sid") String userName){
        sessionPools.put(userName, session);
        addOnlineCount();
        System.out.println(userName + "加入webSocket！当前人数为" + onlineNum);
        List<String> userIds = new ArrayList();
        Enumeration<String> keys = sessionPools.keys();
        while(keys.hasMoreElements()){
            String value = keys.nextElement();//调用nextElement方法获得元素
            userIds.add(value);
        }
        System.out.println(keys+ "=============" + userIds.toString());//打印当前参与聊天人数
        try {
            sendMessage(session, "欢迎" + userName + "加入连接！");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    //关闭连接时调用
    @OnClose
    public void onClose(@PathParam(value = "sid") String userName){
        sessionPools.remove(userName);
        subOnlineCount();
        System.out.println(userName + "断开webSocket连接！当前人数为" + onlineNum);
    }

    //收到客户端信息
    @OnMessage
    public void onMessage(String message) throws IOException{
        User u = JSON.parseObject(message, User.class);
        System.out.println("客户端：" + message + ",已收到");
        String toUserId = u.getToUserId();
        String contentText = u.getContentText();
        Session session = sessionPools.get(toUserId);
        //只发给指定人
        if(session!=null){
            try {
                sendMessage(session, contentText);
            } catch(Exception e){
                e.printStackTrace();
            }
        }
        //发给当前全部人
//        for (Session session: sessionPools.values()) {
//            try {
//                sendMessage(session, message);
//            } catch(Exception e){
//                e.printStackTrace();
//                continue;
//            }
//        }
    }

    //错误时调用
    @OnError
    public void onError(Session session, Throwable throwable){
        System.out.println("发生错误");
        throwable.printStackTrace();
    }

    public static void addOnlineCount(){
        onlineNum.incrementAndGet();
    }

    public static void subOnlineCount() {
        onlineNum.decrementAndGet();
    }

}

启动项目：

假设我们有10和20两个user

我们互发消息看一下：

小小舍

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
springboot+websocket实现即兴聊天

demo结构：demo主要页面：webSocket.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>即兴聊天</title></head><body><h3>欢迎来到：即兴聊天</h3><button onclick="openSocke
复制链接

扫一扫