websocket springboot 聊天室 群聊 私聊

最新推荐文章于 2022-11-15 21:15:19 发布
最新推荐文章于 2022-11-15 21:15:19 发布
阅读量647 收藏 2
点赞数
分类专栏： springboot websocket

项目需求

  • 利用 websocket 实现 消息的推送，比定时任务更加节约性能
  • 利用websocket 可以实现消息的群聊和私聊，我们可以根据这个进行开发

项目实现

  • 在eclipse 上面 创建一个springboot 项目 版本1.5.2 release
  • pom.xml 加入相关依赖
<dependencies>
	<!--Web项目必须加上-->
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-web</artifactId>
	</dependency>

	<!--造成用户启动失败的原因之一  -->
	<!-- <dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter</artifactId>
	</dependency>  -->

	<!-- springboot websocket -->
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-websocket</artifactId>
	</dependency>

	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-test</artifactId>
		<scope>test</scope>
	</dependency>
	<!--访问静态资源配置下面的依赖-->
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-thymeleaf</artifactId>
	</dependency>
	<!--允许不严格的html5格式出现-->
	<dependency>
		<groupId>net.sourceforge.nekohtml</groupId>
		<artifactId>nekohtml</artifactId>
		<version>1.9.22</version>
	</dependency>
	<!-- google的集合 -->
	<dependency>
		<groupId>com.google.collections</groupId>
		<artifactId>google-collections</artifactId>
		<version>1.0</version>
	</dependency>
	<!-- JSON Configuration -->
	<dependency>
		<groupId>com.alibaba</groupId>
		<artifactId>fastjson</artifactId>
		<version>1.2.6</version>
	</dependency>
</dependencies>
  • 启动类
package com.fsl.springbootwebsocket;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication
@ComponentScan("com.fsl.springbootwebsocket")
public class SpringbootWebsocketApplication {

	public static void main(String[] args) {
		SpringApplication.run(SpringbootWebsocketApplication.class, args);
	}

}
  • application.properties
server.port=9030

spring.thymeleaf.content-type=text/html 
spring.thymeleaf.cache=false 
spring.thymeleaf.mode =LEGACYHTML5
  • websocket 的基础配置 1
package com.fsl.springbootwebsocket.config;

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

@Configuration
public class WebSocketStompConfig{
    @Bean
    public ServerEndpointExporter serverEndpointExporter()
    {
        return new ServerEndpointExporter();
    }
}
  • websocket 的基础配置 2
package com.fsl.springbootwebsocket.config;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.google.common.collect.Maps;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
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.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;

@Component
@ServerEndpoint("/websocket/{username}")
public class WebSocket {
	private Logger logger = LoggerFactory.getLogger(this.getClass());
	/**
	 * 在线人数
	 */
	public static int onlineNumber = 0;
	/**
	 * 以用户的姓名为key，WebSocket为对象保存起来
	 */
	private static Map<String, WebSocket> clients = new ConcurrentHashMap<String, WebSocket>();
	/**
	 * 会话
	 */
	private Session session;
	/**
	 * 用户名称
	 */
	private String username;

	/**
	 * 建立连接
	 *
	 * @param session
	 */
	@OnOpen
	public void onOpen(@PathParam("username") String username, Session session) {
		onlineNumber++;
		logger.info("现在来连接的客户id：" + session.getId() + "用户名：" + username);
		this.username = username;
		this.session = session;
		logger.info("有新连接加入！ 当前在线人数" + onlineNumber);
		try {
			// messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
			// 先给所有人发送通知，说我上线了
			Map<String, Object> map1 = Maps.newHashMap();
			map1.put("messageType", 1);
			map1.put("username", username);
			sendMessageAll(JSON.toJSONString(map1), username);

			// 把自己的信息加入到map当中去
			clients.put(username, this);
			// 给自己发一条消息：告诉自己现在都有谁在线
			Map<String, Object> map2 = Maps.newHashMap();
			map2.put("messageType", 3);
			// 移除掉自己
			Set<String> set = clients.keySet();
			map2.put("onlineUsers", set);
			sendMessageTo(JSON.toJSONString(map2), username);
		} catch (IOException e) {
			logger.info(username + "上线的时候通知所有人发生了错误");
		}

	}

	@OnError
	public void onError(Session session, Throwable error) {
		logger.info("服务端发生了错误" + error.getMessage());
		// error.printStackTrace();
	}

	/**
	 * 连接关闭
	 */
	@OnClose
	public void onClose() {
		onlineNumber--;
		// webSockets.remove(this);
		clients.remove(username);
		try {
			// messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
			Map<String, Object> map1 = Maps.newHashMap();
			map1.put("messageType", 2);
			map1.put("onlineUsers", clients.keySet());
			map1.put("username", username);
			sendMessageAll(JSON.toJSONString(map1), username);
		} catch (IOException e) {
			logger.info(username + "下线的时候通知所有人发生了错误");
		}
		logger.info("有连接关闭！ 当前在线人数" + onlineNumber);
	}

	/**
	 * 收到客户端的消息
	 *
	 * @param message
	 *            消息
	 * @param session
	 *            会话
	 */
	@OnMessage
	public void onMessage(String message, Session session) {
		try {
            logger.info("来自客户端消息：" + message+"客户端的id是："+session.getId());
            JSONObject jsonObject = JSON.parseObject(message);
            String textMessage = jsonObject.getString("message");
            String fromusername = jsonObject.getString("username");
            String tousername = jsonObject.getString("to");
            //如果不是发给所有，那么就发给某一个人
            //messageType 1代表上线 2代表下线 3代表在线名单  4代表普通消息
            Map<String,Object> map1 = Maps.newHashMap();
            map1.put("messageType",4);
            map1.put("textMessage",textMessage);
            map1.put("fromusername",fromusername);
            if(tousername.equals("All")){
                map1.put("tousername","所有人");
                sendMessageAll(JSON.toJSONString(map1),fromusername);
            }
            else{
                map1.put("tousername","java");
                sendMessageTo(JSON.toJSONString(map1),"java"); //c++或者任何一个用户   对java 说
                map1.put("fromusername","java");
                map1.put("tousername","browser");
                map1.put("textMessage","5896");
                sendMessageTo(JSON.toJSONString(map1),"browser"); // java 对  浏览器   说
            }
        }
        catch (Exception e){
            logger.info("发生了错误了");
        }
	}

	public void sendMessageTo(String message, String ToUserName) throws IOException {
		for (WebSocket item : clients.values()) {
			if (item.username.equals(ToUserName)) {
				item.session.getAsyncRemote().sendText(message);
				break;
			}
		}
	}

	public void sendMessageAll(String message, String FromUserName) throws IOException {
		for (WebSocket item : clients.values()) {
			item.session.getAsyncRemote().sendText(message);
		}
	}

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

}

// 初始代码
/*try {
JSONObject jsonObject = JSON.parseObject(message);
String textMessage = jsonObject.getString("message");
String fromusername = jsonObject.getString("username");// 谁发送的消息
String tousername = jsonObject.getString("to"); // 将消息发送给谁
Map<String, Object> map1 = Maps.newHashMap();
map1.put("messageType", 4);
map1.put("textMessage", textMessage);
map1.put("fromusername", fromusername);
if (tousername.equals("java")) {
	map1.put("tousername", tousername);
	System.err.println("我是c++，我正在给java发送数据");
	sendMessageTo(JSON.toJSONString(map1), tousername);
	System.err.println("我是java，我收到了数据，并准备发送给浏览器");
	map1.put("fromusername", "java");
	sendMessageTo("123", "browser");
	System.err.println("我是浏览器，我收到了来自java端的数据");
} else if (tousername.equals("browser")) {
	map1.put("tousername", tousername);
	sendMessageTo(JSON.toJSONString(map1), tousername);
}else{
	System.err.println("发送数据错误");
}
} catch (IOException e) {      
e.printStackTrace();
}*/
  • 连接websocket的启动类
package com.fsl.springbootwebsocket.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Controller
//@RestController
public class WebSocketController {

    private Logger logger = LoggerFactory.getLogger(this.getClass());

    @RequestMapping("/websocket/{name}")
    public String webSocket(@PathVariable String name, Model model){
        try{
            logger.info("跳转到websocket的页面上");
            model.addAttribute("username",name);
            return "websocket";
        }
        catch (Exception e){
            logger.info("跳转到websocket的页面上发生异常，异常信息是："+e.getMessage());
            return "index";
        }
    }
    
}
  • 页面展示 index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页信息</title>
    <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div>
    <span>这里是首页的信息</span>
</div>
<div>
    <input type="text" id="show" value="aaaaaa">
</div>
</body>
<script>
    $(function () {
       console.log("输入框的值是："+$("#show").val());
    });
</script>
</html>
  • 页面展示 websocket.html
<!DOCTYPE html>
<html>
<head>
    <title>websocket</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
</head>

<body>
    <div style="margin: auto;text-align: center">
        <h2>Welcome to websocket</h2>
    </div>
    <br/>
    <div style="margin: auto;text-align: center">
        <select id="onLineUser">
            <option>--所有--</option>
        </select>
        <input id="text" type="text" />
        <button onclick="send()">发送消息</button>
    </div>
    <br>
    <div style="margin-right: 10px;text-align: right">
        <button onclick="closeWebSocket()">关闭连接</button>
    </div>
    <hr/>
    <div id="message" style="text-align: center;"></div>
    <input  type="text" th:value="${username}" id="username" style="display: none" />
</body>


<script type="text/javascript">
    var webSocket;
    var commWebSocket;
    var username = document.getElementById('username').value;
    setMessageInnerHTML("当前用户是：" + username ) ;
    
    if ("WebSocket" in window)
    {
        webSocket = new WebSocket("ws://localhost:9030/websocket/"+document.getElementById('username').value);
		console.log(webSocket);
		console.log(document.getElementById('username').value);
        //连通之后的回调事件
        webSocket.onopen = function()
        {
            //webSocket.send( document.getElementById('username').value+"已经上线了");
            console.log("已经连通了websocket");
            setMessageInnerHTML("已经连通了websocket");
        };

        //接收后台服务端的消息
        webSocket.onmessage = function (evt)
        {
            var received_msg = evt.data;
            console.log("数据已接收:" +received_msg);
            var obj = JSON.parse(received_msg);
            console.log("可以解析成json:"+obj.messageType);
            //1代表上线 2代表下线 3代表在线名单 4代表普通消息
            if(obj.messageType==1){
                //把名称放入到selection当中供选择
                var onlineName = obj.username;
                var option = "<option>"+onlineName+"</option>";
                $("#onLineUser").append(option);
                setMessageInnerHTML(onlineName+"上线了");
            }
            else if(obj.messageType==2){
                $("#onLineUser").empty();
                var onlineName = obj.onlineUsers;
                var offlineName = obj.username;
                var option = "<option>"+"--所有--"+"</option>";
                for(var i=0;i<onlineName.length;i++){
                    if(!(onlineName[i]==document.getElementById('username').value)){
                        option+="<option>"+onlineName[i]+"</option>"
                    }
                }
                $("#onLineUser").append(option);

                setMessageInnerHTML(offlineName+"下线了");
            }
            else if(obj.messageType==3){
                var onlineName = obj.onlineUsers;
                var option = null;
                for(var i=0;i<onlineName.length;i++){
                    if(!(onlineName[i]==document.getElementById('username').value)){
                        option+="<option>"+onlineName[i]+"</option>"
                    }
                }
                $("#onLineUser").append(option);
                console.log("获取了在线的名单"+onlineName.toString());
            }
            else{
                setMessageInnerHTML(obj.fromusername+"对"+obj.tousername+"说："+obj.textMessage);
            }
        };

        //连接关闭的回调事件
        webSocket.onclose = function()
        {
            console.log("连接已关闭...");
            setMessageInnerHTML("连接已经关闭....");
        };
    }
    else{
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
    }
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    function closeWebSocket() {
        //直接关闭websocket的连接
        webSocket.close();
    }

    function send() {
        var selectText = $("#onLineUser").find("option:selected").text();
        if(selectText=="--所有--"){
            selectText = "All";
        }
        else{
            setMessageInnerHTML(document.getElementById('username').value+"对"+selectText+"说："+ $("#text").val());
        }
        var message = {
            "message":document.getElementById('text').value,
            "username":document.getElementById('username').value,
            "to":selectText
        };
        webSocket.send(JSON.stringify(message));
        $("#text").val("");

    }
</script>

</html>
  • 还有部分的css js

启动项目(后面的名字都是自定义的)

  • 访问地址： localhost:9030/websocket/jack
  • 访问地址： localhost:9030/websocket/mike
  • 访问地址： localhost:9030/websocket/java
    • 访问地址： localhost:9030/websocket/browser

参考文章

遇到的问题








ajdxwz
关注
专栏目录
聊天室（群聊私聊）
08-17
【聊天室（群聊私聊）】 在互联网通信领域，聊天室是一种常见的在线交流平台，它允许用户实时发送文本、语音、图片等信息，进行群体或个人间的互动沟通。聊天室分为两种主要类型：群聊和私聊，这两种模式各有其特点...
SpringBoot+websocket实现私聊和群聊(可以发送文字和图片)
Attacking_Ape的博客
07-27 9652
Websocket实现私聊和群聊1. websocket的概念1.1. 全双工概念2. websocket实现聊天室2.1. WebSocket API2.1.1. 构造方法2.1.1.1. 语法2.1.1.2. 参数2.1.1.3. 抛出异常2.1.2. 常量2.1.3. 属性2.1.4. 方法2.1.5. 事件3. websocket实现群聊或私聊或图片发送3.1. 项目的最终目录结构![本图片分为三个小的项目：1.websocket实现群聊；2.websocket实现群聊和私聊；3.websocket
【分布式WebSocket - 3】SpringBoot集成STOMP协议完成私聊、群聊
叁滴水 的博客
06-09 2237
STOMP 中文为“面向消息的简单文本协议”，STOMP 提供了能够协作的报文格式，以至于 STOMP 客户端可以与任何 STOMP 消息代理（Brokers）进行通信，从而为多语言，多平台和 Brokers 集群提供简单且普遍的消息协作。STOMP 协议可以建立在 WebSocket 之上，也可以建立在其他应用层协议之上。通过 Websocket建立 STOMP 连接，也就是说在 Websocket 连接的基础上再建立 STOMP 连接。最终实现如上图所示，这一点可以在代码中有一个良好的体现。
SpringBoot与webSocket实现在线聊天室——实现私聊+群聊+聊天记录保存
热门推荐
qq_47719491的博客
08-16 1万+
包结构图： 代码部分： 实体类：UserMessage.java 定义实体类与数据库连接，存储聊天记录 package com.example.springboot_websocket.bean; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import java.util.Date; /** * @author Admin
springboot+websocket聊天室（私聊+群聊）
weixin_43165220的博客
07-26 5207
springboot+websocket聊天室，实现了私聊和群聊。
基于WebSocket + SpringBoot的聊天系统
Mazai-Liu的博客
11-15 1496
使用Vue + WebSocket + SpringBoot + MongoDB + Mysql + Github图床 + GitHub Api调用+ BootStrap完成
springboot+websocket+redis实现聊天室
08-05
综上所述，Spring Boot、WebSocket和Redis的结合在聊天室项目中起到了关键作用，它们共同构建了一个高效、实时的通信平台，满足了私聊、群聊和图片发送等多种功能需求。开发者可以根据这些知识点进行学习和实践，...
使用JavaScript配合webSocket实现聊天应用私聊和群聊
最新发布
10-13
聊天室管理：支持创建、加入和退出聊天室，实现多人在线交流。 消息收发：利用WebSocket实现消息的实时发送和接收，确保聊天内容的即时性。 界面设计：采用简洁明了的用户界面设计，提供舒适的聊天体验。 技术亮点：...
websocket聊天室
02-20
在这个"WebSocket聊天室"项目中，我们利用WebSocket技术来构建一个实时的在线聊天环境，用户可以进行群聊和私聊。 首先，前端使用了JSP（JavaServer Pages）技术。JSP是Java的一种视图技术，它允许开发者将HTML、...
基于websocket的网页聊天室（私聊+多对多）
11-19
本项目是一个基于WebSocket的网页聊天室，具备私聊和多对多聊天功能，适合初学者理解和实践网络通信的实时性。 在WebSocket技术中，服务器和客户端之间的通信始于一个HTTP升级请求，客户端通过发送一个"Upgrade...
springboot+websocket聊天室（多人聊天，单人聊天）
08-30
springboot集成websocket实现聊天室功能（可多人聊天和单独聊天）
Springboot+websocket 实现多人聊天室/单人聊天
10-11
这是一个简单使用websocket实现多人聊天室，单人聊天室的demo，里面使用的是最原始的websocket的方法，附有客户端界面可以直接跑起来发送消息看效果。 该项目对应刚刚接触websocket技术是比较有用的。 2019-10-11的个人实测编码运行调试过的demo资源。
sprig boot结合websocket 实现的同时多人在线聊天室
07-16
这是用springboot2.0加上websocket+cookie实现的 聊天室功能，登录的用户存储在内存中。没有数据库。可以实现同一浏览器，多个用户登录，同时在线聊天。共分为 两个页面，一个是输入用户名页面，一个是聊天页面。 资源是压缩包，解压 即可用
SpringBoot+WebSocket实现消息推送及简单的聊天功能
10-18
SpringBoot+WebSocket实现消息推送，SpringBoot+WebSocket+SpringSecurity实现聊天室
Spring Boot整合websocket实现群聊，点对点聊天,图片发送，音频发送
10-18
Spring Boot整合websocket实现群聊，点对点聊天,图片发送，音频发送
springboot整合websocket实现群聊 + 私信，可提供源码
nanxiang11的博客
08-18 4637
websocket怎么说呢，就是服务器可以主动向客户端发起对话！ 这样就很好理解了吧！ 咱们先上效果图： 相对来说更好看那么一点但是，实现代码都是一样的。我们先来准备工作导入依赖 <!--websocket依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-st
新版本录制websocket教程整合SpringBoot socketjs视频教程
01-09
websocket入门到项目实战系列课程，20节左右的课程，每节课有课堂笔记和源码，主要讲解其的概念、基础开发，项目实战，nginx集群部署；采用的是java语言，框架是spring和springBoot；课程讲解有单播广播的介绍和使用场景，服务端定时推送，spring针对websocket的握手拦截器、频道拦截器开发和应用；采用nginx负载均衡器，后端多节点集群部署的问题和解决方案；购买后加进技术问答群Q群699347262备注订单号后四位
SpringBoot+WebSocket实现简单的一对一web聊天
Crazy_young_man的博客
04-26 5384
前言 最近项目中要实现客服系统，其实网上有很多的服务商提供这种接口，但最终决定使用SpringBoot+WebSocket的方式实现。 下面我的项目的结构是使用SpringBoot+Nginx实现的前后端分离的，但是这个不重要，这里只是提出来。 SpringBoot和Nginx我就不在这里多说了，网上有很多教程。过几天我也会专门写几篇文章记录一下。 1. 后台代码 在pom.xml中添加sprin...
SpringBoot整合WebSocket实现群聊和私聊
王绍桦
07-29 2022
1.pom.xml添加websocket依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> 2.创建...
vue 聊天室私聊群聊
08-09
在Vue聊天室应用中，通常会设计成支持私聊和群聊功能： 1. **私聊**：用户之间可以一对一地进行实时聊天，这通常涉及到两个组件间的通信，比如通过Vuex存储消息队列，当用户输入并发送消息时，将消息存入状态管理器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值