使用springboot整合websocket实现群聊教程
目录
- 先上效果图：
- 先来准备工作导入依赖
- 导入依赖后扫描启用
- 接收前端传回数据
- 其中重点就是4个注解
- **@OnOpen，@OnClose，@OnMessage，@OnError**
- 前端页面代码
- 模板引擎代码如下
- 最后效果图如下
先上效果图：
相对来说更好看那么一点但是，实现代码都是一样的。
先来准备工作导入依赖
<!--websocket依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
其实springboot已经内置了，直接在主函数启动就行。但我们这次就讲这个。
导入依赖后扫描启用
package com.nx.study.springstudy.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WS {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
**@ServerEndpoint("/websocket/{username}")**
接收前端传回数据
@Component启用
package com.nx.study.springstudy.bean;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JsonMappingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import net.sf.json.JSONObject;
import org.springframework.stereotype.Component;
import org.springframework.web.bind.annotation.RequestParam;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.*;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;
@ServerEndpoint("/websocket/{username}")
@Component
public class Myws {
private static Map<String, Myws> webSocketSet = new ConcurrentHashMap<String, Myws>();
private static Map<String, Session> map = new HashMap<String, Session>();
private static List<String> namelist = new ArrayList<String>();
private static JSONObject jsonObject = new JSONObject();
private static JSONObject jsonObject2 = new JSONObject();
private static List<String> nm_msg = new ArrayList<String>();
private SocketMsg socketMsg;
private Session session;
private String name;
@OnOpen
public void onpen(Session session, @PathParam(value = "username") String username){
if(username == null){
username = "游客";
}
this.session = session;
// this.name = "南" + getname();
this.name = username;
webSocketSet.put(name, this);
map.put(username, session);
namelist.clear(); // 清空原来的信息
setonlion();
jsonObject.put("onlinepp", namelist);
String message = jsonObject.toString();
broadcast2(message);
}
@OnClose
public void onclose(){
webSocketSet.remove(this.name); // 移除对象
namelist.clear();
setonlion();
jsonObject.clear();
jsonObject.put("onlinepp", namelist);
String message = jsonObject.toString();
broadcast3(message);
}
@OnMessage
public void onmessage(String message){
nm_msg.clear();
jsonObject2.clear();
nm_msg.add(name);
nm_msg.add(message);
jsonObject2.put("chat", nm_msg);
String message2 = jsonObject2.toString();
broadcast(message2);
}
@OnError
public void onError(Session session, Throwable error) {
System.out.println("发生错误");
error.printStackTrace();
}
public void broadcast(String message){
for (Map.Entry<String, Myws> item : webSocketSet.entrySet()){
item.getValue().session.getAsyncRemote().sendText(message);
}
}
public void broadcast2(String message){
for (Map.Entry<String, Myws> item : webSocketSet.entrySet()){
item.getValue().session.getAsyncRemote().sendText(message);
}
}
public void broadcast3(String message){
for (Map.Entry<String, Myws> item : webSocketSet.entrySet()){
if (!item.getKey().equals(name)){
item.getValue().session.getAsyncRemote().sendText(message);
}
}
}
public void setonlion(){
for (Map.Entry<String, Myws> item : webSocketSet.entrySet()){
namelist.add(item.getKey());
}
}
public String getname() {
String linkNo = "";
// 用字符数组的方式随机
String model = "小大天明画美丽豪子余多少浩然兄弟朋友美韵紫萱好人坏蛋误解不要停栖栖遑遑可";
char[] m = model.toCharArray();
for (int j = 0; j < 2; j++) {
char c = m[(int) (Math.random() * 36)];
// 保证六位随机数之间没有重复的
if (linkNo.contains(String.valueOf(c))) {
j--;
continue;
}
linkNo = linkNo + c;
}
return linkNo;
}
}
其中重点就是4个注解
**@OnOpen，@OnClose，@OnMessage，@OnError**
- @OnOpen–>客户端打开链接时候触发执行
- @OnClose–>客户端关闭链接触发执行
- @OnMessage–>客户端发送信息触发执行
- @OnError–>发送错误时候触发执行
对象信息都储存在Session，可以仔细看看上面代码很好理解。
我们只需要理解这4个注解的作用就可以！
前端页面代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="icon" type="image/x-icon" th:href="@{/img/user/head/favicon.ico}" />
<script th:src="@{webjars/jquery/3.1.1/jquery.min.js}"></script>
<script th:src="@{webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<link rel="stylesheet" th:href="@{webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
<link th:href="@{/css/home.css}" rel="stylesheet" type="text/css" />
<meta charset="UTF-8">
<title>在线聊天室</title>
</head>
<body>
<div class="container-fluid">
<div style="width: 100%;height: 100px;text-align: center;margin-bottom: 30px;color: #495e6a;box-shadow: 0px 0px 10px #000000">
<br>
<h1>文明用语，快乐你我他</h1>
</div>
<div style="width: 800px;height: 600px;margin: auto;background-color: #dce9f6;box-shadow: 0px 0px 10px #707074;display: flex">
<div style="width: 200px;height: 600px;background-color: #d4d1d1">
<div style="width: 160px;height: 40px;margin: auto;margin-top: 10px;background-color: #fdffff;text-align: center;box-shadow: 0px 0px 10px #474749;border-radius: 4px">
<span class="glyphicon glyphicon-globe" style="font-size: 30px;padding-top: 2px;padding-bottom: 2px"></span>
<span style="font-size: 30px">群聊</span>
</div>
<div style="width: 160px;height: 40px;margin: auto;margin-top: 10px;background-color: #fdffff;text-align: center;box-shadow: 0px 0px 10px #474749;border-radius: 4px">
<span class="glyphicon glyphicon-star" style="font-size: 30px;padding-top: 2px;padding-bottom: 2px"></span>
<span style="font-size: 30px" th:text="${Springuser.username}">游客</span>
</div>
<hr>
<div id="online" style="width: 200px;height: 500px;word-break: break-word;overflow: auto">
</div>
</div>
<div style="width: 600px;height: 600px">
<div style="width: 600px;height: 500px;padding: 20px 20px 20px 20px;word-break: break-word;overflow: auto" id="message">
</div>
<div style="width: 600px;height: 100px;background-color: #ddf1d7;display: flex">
<div style="width: 100px;height: 100px;text-align: center;background-color: #f5d2d2">
<button id="btn1" class="btn btn-success" style="margin-top: 5px">连接上线</button><br>
<br>
<button id="btn2" class="btn btn-danger">下线</button>
</div>
<div style="width: 500px;height: 100px;padding: 10px 10px 10px 10px" class="input-group">
<input id="msg" type="text" class="form-control" placeholder="在这里输入想说的话吧！" /><br>
<button id="btn3" class="btn btn-info" style="margin-top: 10px;float: right">发送消息</button>
</div>
</div>
</div>
</div>
<div class="div2" style="margin-top: 30px;background-color: #ffffff">
<br><br>
<a href="#"><span style="color: #000000;">关于我们</span></a> |
<a href="mailto: 2251798294@qq.com" style="color: #000000;">找我合作</a><br>
<a href="http://beian.miit.gov.cn" style="color: #202223;">赣ICP备2021004042号</a>
</div>
</div>
</body>
<script th:inline="javascript" language='javascript'>
$(document).ready(function(){
var select;
var message = "";
var fromuser = "";
var touser = "";
var type = 0;
var username = [[${Springuser.username}]];
var websocket = null;
$("#btn1").click(function(){
//判断当前浏览器是否支持WebSocket
if(select === 1){
alert("你已连接上线路，无需重复连接！")
}else {
if ('WebSocket'in window) {
websocket = new WebSocket("ws://wenhaosuper.top:8000/websocket/" + username);
alert("欢迎-->" + username + "<--成功上线！");
select = 1;
} else {
alert('Not support websocket')
}
}
//连接发生错误的回调方法
websocket.onerror = function() {
alert("错误");
};
//连接成功建立的回调方法
websocket.onopen = function() {
}
//接收到消息的回调方法
websocket.onmessage = function(event) {
var msg = event.data
var obj = JSON.parse(msg);
var zxname = obj.onlinepp;
var chat = obj.chat;
if (zxname != null){
onlinename(zxname);
}
if (chat != null){
setchat(chat);
}
}
//连接关闭的回调方法
websocket.onclose = function() {
alert("离开");
select = 2;
$("#online").empty();
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function() {
websocket.onclose;
websocket.close();
}
});
//将消息显示在网页上
function setchat(message) {
$("<div style=\"width: 560px;min-height: 40px;display: flex;margin-bottom: 20px\">\n" +
" <div style=\"width: 40px;height: 40px;background-color: #ffffff;text-align: center;border-radius: 20px\">\n" +
" <span style=\"font-size: 28px;margin-top: 9px\"><strong>N</strong></span>\n" +
" </div>\n" +
" <div style=\"min-height: 40px;margin-left: 10px\">\n" +
" <div style=\"height: 18px\">\n" +
" <span style=\"color: #7f7777;font-size: 14px\">"+message[0]+"</span>\n" +
" </div>\n" +
" <div style=\"min-height: 20px;word-break: break-word;background-color: #ffffff;padding: 10px 10px 10px 10px;border-radius: 6px\">\n" +
" <span>"+message[1]+"</span>\n" +
" </div>\n" +
" </div>\n" +
" </div>").appendTo("#message");
}
function onlinename(obj){
$("#online").empty();
obj.forEach(function (e){
$("<div style=\"width: 160px;height: 40px;margin: auto;margin-top: 10px;background-color: #fdffff;text-align: center;box-shadow: 0px 0px 10px #474749;border-radius: 4px;overflow: hidden\">\n" +
" <span class=\"glyphicon glyphicon-user\" style=\"font-size: 30px;padding-top: 2px;padding-bottom: 2px\"></span>\n" +
" <span style=\"font-size: 26px\">"+e+"</span>\n" +
" </div>").appendTo("#online");
});
}
$("#btn2").click(function(){
websocket.close();
});
//发送消息
$("#btn3").click(function(){
var message = $("#msg").val();
websocket.send(message);
$("#msg").val("");
});
});
</script>
</html>
因为我这个是springboot项目
模板引擎代码如下
package com.nx.study.springstudy.controller;
import com.nx.study.springstudy.bean.UserPostForm;
import com.nx.study.springstudy.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
@Controller
public class WebSocketController {
@Autowired
private UserService userService;
@RequestMapping("/websocket")
public String webSocket(Model model, HttpServletRequest request){
HttpSession httpSession = request.getSession();
String username = (String) request.getSession().getAttribute("username");
String userpassword = (String) request.getSession().getAttribute("userpassword");
if (username != null){
UserPostForm Springuser = userService.query(username,userpassword);
model.addAttribute("Springuser", Springuser);
return "index/webSocket";
}else {
return "index/ZGZG";
}
}
}
最后效果图如下
以上就是使用springboot整合websocket实现群聊教程的详细内容，更多关于springboot整合websocket实现群聊的资料请关注我们其它相关文章！
相关推荐
-
SpringBoot项目部署在weblogic中间件的注意事项说明
SpringBoot项目部署在weblogic中间件的注意事项 1.SpringBoot项目Tomcat部署无需手动配置web.xml 但是使用weblogic部署项目时需配置所有相关的监听器和过滤器等. <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
-
解决weblogic部署springboot项目步骤及可能会出现的问题
项目为springboot的需要适配weblogic 第一步 修改启动类, 很多搜到的都是这样 修改启动类StartEPassApplication 第二步 完全排除掉tomcat 详情请看下面的地址 完全排除springboot的tomcat还需加上weblogic.xml <?xml version="1.0" encoding="UTF-8"?> <wls:weblogic-web-app xmlns:wls="http://xml
-
一篇文章带你了解SpringBoot Web开发
目录 SpringBoot Web开发 静态资源 定制首页 thymeleaf模板引擎 1.导入依赖 2.controller书写 源码分析 Thymeleaf语法 基本语法: MVC配置原理 总结 SpringBoot Web开发 springboot到底帮我们配置了什么?我们能不能修改?能修改那些东西?能不能扩展? xxxAutoConfiguration: 向容器中自动配置组件 xxxProperties:自动配置类,装配配置文件中自定义的一些内容 要解决的问题: 导入静态资源 首页 js
-
springboot+WebMagic+MyBatis爬虫框架的使用
目录 1.添加maven依赖 2.项目配置文件 application.properties 3.数据库表结构 4.实体类 5.mapper接口 6.CrawlerMapper.xml文件 7.知乎页面内容处理类ZhihuPageProcessor 8.知乎数据处理类ZhihuPipeline 9.知乎爬虫任务类ZhihuTask 10.Spring boot程序启动类 WebMagic是一个开源的java爬虫框架.WebMagic框架的使用并不是本文的重点,具体如何使用请参考官方文档:http
-
解决SpringBoot web项目启动后立即关闭的问题
SpringBoot web项目启动后立即关闭 我们在写spring boot web项目时,有时会遇到启动后立即关闭的情况,或者是无法加载某些类,这是什么呢原因呢? 仔细排查pom文件,发现已经添加了web的依赖,而且对照过网上的springBoot web项目,并没有什么出入,此时就可以怀疑是不是项目中所依赖的jar包发生了冲突呢? 于是可以尝试下面的方法来解决: 使用Maven的命令依赖性:清除本地存储库 清理本地仓库,注意该命令仅仅是清理该项目所依赖的本地仓库中的JAR包 具体用法
-
使用springboot整合websocket实现群聊教程
目录 先上效果图: 先来准备工作导入依赖 导入依赖后扫描启用 接收前端传回数据 其中重点就是4个注解 **@OnOpen,@OnClose,@OnMessage,@OnError** 前端页面代码 模板引擎代码如下 最后效果图如下 先上效果图: 相对来说更好看那么一点但是,实现代码都是一样的. 先来准备工作导入依赖 <!--websocket依赖--> <dependency> <groupId>org.springframework.boot</groupId&
-
springboot整合websocket实现群聊思路代码详解
实现思路 发送者向服务器发送大家早上好.其它客户端可以收到对应消息. 项目展示 通过springboot引入websocket,实现群聊,通过在线websocket测试进行展示. 核心代码 pom引入jar <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2
-
SpringBoot的WebSocket实现单聊群聊
本文实例为大家分享了SpringBoot的WebSocket实现单聊群聊,供大家参考,具体内容如下 说在开头 在HTTP协议中,所有的请求都是由客户端发送给服务端,然后服务端发送请求 要实现服务器向客户端推送消息有几种methods: 1.轮询 大量无效请求,浪费资源 2.长轮询 有新数据再推送,但这会导致连接超时,有一定隐患 3.Applet和Flash 过时,安全隐患,兼容性不好 消息群发 创建新项目: 添加依赖: <dependency> <groupId>org.sprin
-
springboot整合websocket最基础入门使用教程详解
项目最终的文件结构 1 添加maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.projectlombok</groupId> <
-
Android中使用WebSocket实现群聊和消息推送功能(不使用WebView)
WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex).WebSocket是Web2.0时代的新产物,用于弥补HTTP协议的某些不足,不过他们之间真实的关系是兄弟关系,都是对socket的进一步封装,其目前最直观的表现就是服务器推送和聊天功能.更多知识参考:如何理解 TCP/IP, SPDY, WebSocket 三者之间的关系? 今天的重点是讲如何在Android中脱离WebView使用WebSocket,而不是在Web浏览器
-
SpringBoot整合websocket实现即时通信聊天
目录 一.技术介绍 1.1 客户端WebSocket 1.1.1 函数 1.1.2 事件 1.2 服务端WebSocket 二.实战 2.1.服务端 2.1.1引入maven依赖 2.1.2 编写配置类 2.1.3 编写WebSocketService服务类 2.1.4 建立连接 2.1.5 关闭连接 2.1.6 发送消息 2.1.7 监听错误 2.2 客户端 2.2.1 主页面 2.2.1 聊天页面 三.开源地址 四.参考文献 一.技术介绍 线上演示地址:http://chat.breez.w
-
Springboot整合MongoDB的Docker开发教程全解
1 前言 Docker是容器开发的事实标准,而Springboot是Java微服务常用框架,二者必然是会走到一起的.本文将讲解如何开发Springboot项目,把它做成Docker镜像,并运行起来. 2 把Springboot打包成Docker镜像 Springboot的Web开发非常简单,本次使用之前讲解过的Springboot整合MongoDB的项目,请参考 实例讲解Springboot整合MongoDB进行CRUD操作的两种方式,文章中有源码:MongoDB的安装请参考:用Docker安装
-
SpringBoot整合WebSocket的客户端和服务端的实现代码
目录 一.项目中服务端的创建 二.java充当客户端链接ws 1.ws客户端的配置 2.配置信息需要在项目启动的时候去启用和链接ws服务 3.接收服务端推送的消息进行权限过滤demo 4.ws客户端推送消息,推送消息和上面服务端类似. 本文是项目中使用了websocket进行一些数据的推送,对比项目做了一个demo,ws的相关问题不做细数,仅做一下记录. 此demo针对ws的搭建主要逻辑背景是一个服务端B:通讯层 产生消息推送出去,另外一个项目A充当客户端和服务端,A的客户端:是接收通讯层去无差
-
SpringBoot整合Shiro的环境搭建教程
SpringBoot整合Shiro环境搭建 导入 SpringBoot 和 Shiro 整合包的依赖: <!-- https://mvnrepository.com/artifact/org.apache.shiro/shiro-spring --> <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-spring</artifactId> <ve
-
SpringBoot整合WebSocket实现后端向前端发送消息的实例代码
一.什么是 websocket 接口 使用 websocket 建立长连接,服务端和客户端可以互相通信,服务端只要有数据更新,就可以主动推给客户端. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输.在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道.两者之