使用springboot整合websocket實(shí)現(xiàn)群聊教程
更新時(shí)間：2021年08月19日 17:26:48 作者：是南巷的花貓啊
websocket怎么說呢，就是服務(wù)器可以主動向客戶端發(fā)起對話，下面就是springboot整合websocket實(shí)現(xiàn)群聊的操作代碼，一起來看一下get新技能吧
先上效果圖：
相對來說更好看那么一點(diǎn)但是，實(shí)現(xiàn)代碼都是一樣的。
先來準(zhǔn)備工作導(dǎo)入依賴
<!--websocket依賴-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
其實(shí)springboot已經(jīng)內(nèi)置了，直接在主函數(shù)啟動就行。但我們這次就講這個(gè)。
導(dǎo)入依賴后掃描啟用
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}")**
接收前端傳回?cái)?shù)據(jù)
@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("發(fā)生錯(cuò)誤");
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 = "";
// 用字符數(shù)組的方式隨機(jī)
String model = "小大天明畫美麗豪子余多少浩然兄弟朋友美韻紫萱好人壞蛋誤解不要停棲棲遑遑可";
char[] m = model.toCharArray();
for (int j = 0; j < 2; j++) {
char c = m[(int) (Math.random() * 36)];
// 保證六位隨機(jī)數(shù)之間沒有重復(fù)的
if (linkNo.contains(String.valueOf(c))) {
j--;
continue;
}
linkNo = linkNo + c;
}
return linkNo;
}
}
其中重點(diǎn)就是4個(gè)注解
**@OnOpen，@OnClose，@OnMessage，@OnError**
- @OnOpen–>客戶端打開鏈接時(shí)候觸發(fā)執(zhí)行
- @OnClose–>客戶端關(guān)閉鏈接觸發(fā)執(zhí)行
- @OnMessage–>客戶端發(fā)送信息觸發(fā)執(zhí)行
- @OnError–>發(fā)送錯(cuò)誤時(shí)候觸發(fā)執(zhí)行
對象信息都儲存在Session，可以仔細(xì)看看上面代碼很好理解。
我們只需要理解這4個(gè)注解的作用就可以！
前端頁面代碼
<!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">發(fā)送消息</button>
</div>
</div>
</div>
</div>
<div class="div2" style="margin-top: 30px;background-color: #ffffff">
<br><br>
<a href="#"><span style="color: #000000;">關(guān)于我們</span></a> |
<a href="mailto: 2251798294@qq.com" style="color: #000000;">找我合作</a><br>
<a 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(){
//判斷當(dāng)前瀏覽器是否支持WebSocket
if(select === 1){
alert("你已連接上線路，無需重復(fù)連接！")
}else {
if ('WebSocket'in window) {
websocket = new WebSocket("ws://wenhaosuper.top:8000/websocket/" + username);
alert("歡迎-->" + username + "<--成功上線！");
select = 1;
} else {
alert('Not support websocket')
}
}
//連接發(fā)生錯(cuò)誤的回調(diào)方法
websocket.onerror = function() {
alert("錯(cuò)誤");
};
//連接成功建立的回調(diào)方法
websocket.onopen = function() {
}
//接收到消息的回調(diào)方法
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);
}
}
//連接關(guān)閉的回調(diào)方法
websocket.onclose = function() {
alert("離開");
select = 2;
$("#online").empty();
}
//監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時(shí)，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。
window.onbeforeunload = function() {
websocket.onclose;
websocket.close();
}
});
//將消息顯示在網(wǎng)頁上
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();
});
//發(fā)送消息
$("#btn3").click(function(){
var message = $("#msg").val();
websocket.send(message);
$("#msg").val("");
});
});
</script>
</html>
因?yàn)槲疫@個(gè)是springboot項(xiàng)目
模板引擎代碼如下
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實(shí)現(xiàn)群聊教程的詳細(xì)內(nèi)容，更多關(guān)于springboot整合websocket實(shí)現(xiàn)群聊的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了SpringBoot中郵件任務(wù)的使用,SpringBoot?郵件任務(wù)是指使用SpringBoot框架來實(shí)現(xiàn)郵件發(fā)送和接收的功能,通過SpringBoot的自動配置和簡化的開發(fā)流程,我們可以輕松地集成郵件功能到我們的應(yīng)用程序中,需要的朋友可以參考下2023-10-10
SpringCloud實(shí)現(xiàn)文件上傳功能的方法詳解
這篇文章主要為大家詳細(xì)介紹了SpringCloud如何實(shí)現(xiàn)文件上傳功能，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)有一定的借鑒價(jià)值，需要的可以參考一下2022-08-08
Spring Boot結(jié)成MyBatis-Plus最全配置指南
本文主要介紹了Spring Boot結(jié)成MyBatis-Plus最全配置指南,包括依賴引入、配置數(shù)據(jù)源、Mapper 掃描、基本CRUD操作等,具有一定的參考價(jià)值,感興趣的可以了解一下2025-03-03
這篇文章主要介紹了java中File類的構(gòu)造函數(shù)及其方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-06-06
Spring Boot自動裝配是指在Spring Boot應(yīng)用啟動時(shí),根據(jù)類路徑下的jar包依賴、Bean定義、各種配置文件等信息,自動配置Spring應(yīng)用上下文的Bean,本文給大家詳細(xì)解析了SpringBoot自動裝配原理,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了SpringBoot?分模塊開發(fā)的操作方法，通過在原項(xiàng)目新增一個(gè)maven模塊，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04
我們在寫代碼的過程中，經(jīng)常會遇到內(nèi)存泄露的問題，比如某個(gè)集合中的對象沒有被回收，或者內(nèi)存出現(xiàn)不明原因的增長。這些都是需要我們來定位的問題，我們可以使用jmap和jhat來對java程序中的內(nèi)存對象進(jìn)行分析。2021-06-06
java數(shù)據(jù)結(jié)構(gòu)與算法之桶排序?qū)崿F(xiàn)方法詳解
這篇文章主要介紹了java數(shù)據(jù)結(jié)構(gòu)與算法之桶排序?qū)崿F(xiàn)方法,結(jié)合具體實(shí)例形式詳細(xì)分析了桶排序的概念、原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
Java基于Socket實(shí)現(xiàn)多人聊天室
這篇文章主要為大家詳細(xì)介紹了Java基于Socket實(shí)現(xiàn)多人聊天室，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
基于java中的null類型---有關(guān)null的9件事
這篇文章主要介紹了java中的null類型---有關(guān)null的9件事，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-08-08