您的位置: 首页  >  文章  >  springboot + websocket做的简单聊天工具 (附源码)

springboot + websocket做的简单聊天工具 (附源码)

分类: 文章 • 2023-10-27 13:29:27

springboot + websocket做的简单聊天工具 (附源码)

关于websocket的概念还有和http的关系这里就不做太多的解释了，这里我抽取到最精简的代码，让我们一些刚开始学习websocket的同学能看到效果易于学习，如果大家觉得有用欢迎转载和收藏，github可以star一下给个支持。

1. 先上源码地址： github 简单聊天工具 (im分支)

springboot + websocket做的简单聊天工具 (附源码)

2. demo地址：点击查看效果

一、使用技术

1. 后端：springboot提供的ws(websocket)服务

ps：注意，下面的代码不是完整代码，完整代码可以到 github下载

  • 引入springboot所需要的 websocket 的 jar 包
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
  • 创建 websocket 服务
package com.coco.demo.socketdemo.service;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * @author wangzz
 * 下面这个@ServerEndpoint("/webSocket") 提供的是ws的服务url
 * 完整url为：ws://域名或ip:port/webSocket //js创建websocket对象需要使用
 */
@Slf4j
@Component
@ServerEndpoint("/webSocket")
public class WebSocket {

    private Session session;

    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<WebSocket>();

    private static Map<String, Object> namesMap = new HashMap<>();

    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);
        log.error("新的连接，连接总数：{}", webSocketSet.size());
    }

    @OnClose
    public void onClose() {
        webSocketSet.remove(this);
        log.error("连接断开，连接总数：{}", webSocketSet.size());
    }

    @OnMessage
    public void onMessage(String message) {
        log.error("收到客户端：{}，发来的消息：{}", namesMap.get(session.getId()), message);
    }

    public void sendMessage(String message) {
        for (WebSocket webSocket : webSocketSet) {
            log.error("广播消息，message={}", message);
            try {
                webSocket.session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

2. 前端：普通的html页面

<!DOCTYPE html>
<html>
<head>
    <title>简单的聊天工具</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript">

    var websocket = null;
    if ('WebSocket' in window) {
        websocket = new WebSocket('ws://www.coco-z.com:9000/webSocket');
    } else {
        alert('该浏览器不支持websocket');
    }
    websocket.onopen = function (ev) {
        console.log('建立连接');
    };
    websocket.onclose = function (ev) {
        console.log('连接关闭');
    };
    websocket.onmessage = function (ev) {
        console.log('收到消息：' + ev.data);
        alert('收到消息：' + ev.data);
    };
    window.onbeforeunload = function (ev) {
        websocket.close();
    };

    function sendMsg() {
        var msgNode = document.getElementById("msg");
        var msg = msgNode.value;
        if (msg) {
            websocket.send(msg);
        }
        msgNode.value = '';
    }
</script>
<body>
<h1>简单的聊天</h1>
<button onclick="sendMsg()">发送消息</button>
<textarea type="text" id="msg" name="msg"></textarea>
<hr />
</body>
</html>

相关推荐