springboot创建简易聊天室

最新推荐文章于 2024-04-29 21:45:45 发布
最新推荐文章于 2024-04-29 21:45:45 发布
阅读量344 收藏 1
点赞数
分类专栏： springboot 文章标签： websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43694038/article/details/106386137
版权

做下记录 copy代码能用

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

注入bean


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
 
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

package com.cloudkd.websocket;
 
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
 
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
 
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
 
//@ServerEndpoint("/websocket/{user}")
@ServerEndpoint("/websocket")
@Component
public class WebSocketServer {
    private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;
    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;
 
    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        //加入set中
        webSocketSet.add(this);
        //在线数加1
        addOnlineCount();
        log.info("有新连接加入！当前在线人数为" + getOnlineCount());
        try {
            sendMessage("连接成功");
        } catch (IOException e) {
            log.error("websocket IO异常");
        }
    }
    // //连接打开时执行
    // @OnOpen
    // public void onOpen(@PathParam("user") String user, Session session) {
    //    currentUser = user;
    //    System.out.println("Connected ... " + session.getId());
    // }
 
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
        log.info("有一连接关闭！当前在线人数为" + getOnlineCount());
    }
 
    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("来自客户端的消息:" + message);
        //群发消息
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
 
    /**
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }
 
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }
 
    /**
     * 群发自定义消息
     */
    public static void sendInfo(String message) {
        log.info(message);
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException ignored) {
            }
        }
    }
 
    private static synchronized int getOnlineCount() {
        return onlineCount;
    }
 
    private static synchronized void addOnlineCount() {
        WebSocketServer.onlineCount++;
    }
 
    private static synchronized void subOnlineCount() {
        WebSocketServer.onlineCount--;
    }
}

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>Title</title>
</head>
<body>
    <h3>Welcome</h3><br/>
    <input id="text" type="text"/>
    <button onclick="send()" id="sendid">发送消息</button>
    <button onclick="anewWebSocket()" id="chonglianid">重连</button>
    <button onclick="closeWebSocket()" id="duankaiid">断开连接</button>
    <div id="message"></div>
</body>
<script>
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    newwebsocket();

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }

    function newwebsocket() {
        if ('WebSocket' in window) {
            //这里ws://192.168.1.111:8080/websocket 写自己的ip和端口号
            websocket = new WebSocket("ws://192.168.200.249:8088/websocket");
            init();
            document.getElementById("sendid").style.display="inline-block";
            document.getElementById("chonglianid").style.display="none";
            document.getElementById("duankaiid").style.display="inline-block";
        }
        else {
            alert('Not support websocket')
        }
    }

    function init() {
        //连接发生错误的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };

        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            setMessageInnerHTML("open");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            setMessageInnerHTML(event.data);
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("close");
        }
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
        document.getElementById("sendid").style.display="none";
        document.getElementById("chonglianid").style.display="inline-block";
        document.getElementById("duankaiid").style.display="none";
    }

    //重新连接
    function anewWebSocket() {
        newwebsocket()
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</html>

package chunxiao.mqttdemo.mqttdemo.server;


import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;

/**
 * @Author: changwensong
 * @Date: 2020/5/27 10:35
 */

@RestController
public class PushWebController {

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

    @GetMapping(value = "/pushWeb")
    public Map<String, Object> pushVideoListToWeb(String message) {
        Map<String, Object> result = new HashMap<String, Object>();
        try {
            WebSocketServer.sendInfo("有新客户呼入,message:" + message);
            result.put("operationResult", true);
        } catch (Exception e) {
            result.put("operationResult", true);
        }
        return result;
    }


}


package chunxiao.mqttdemo.mqttdemo.server;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * @Author: changwensong
 * @Date: 2020/5/27 9:32
 */
@ServerEndpoint("/websocket")
@Component
public class WebSocketServer {

    private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;
    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        //加入set中
        webSocketSet.add(this);
        //在线数加1
        addOnlineCount();
        log.info("有新连接加入！当前在线人数为" + getOnlineCount());
        try {
            sendMessage("连接成功");
        } catch (IOException e) {
            log.error("websocket IO异常");
        }
    }
     //连接打开时执行
//     @OnOpen
//     public void onOpen(@PathParam("user") String user, Session session) {
//        currentUser = user;
//        System.out.println("Connected ... " + session.getId());
//     }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
        log.info("有一连接关闭！当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("来自客户端的消息:" + message);
        //群发消息
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }

    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }

    /**
     * 群发自定义消息
     */
    public static void sendInfo(String message) {
        log.info(message);
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException ignored) {
            }
        }
    }

    private static synchronized int getOnlineCount() {
        return onlineCount;
    }

    private static synchronized void addOnlineCount() {
        WebSocketServer.onlineCount++;
    }

    private static synchronized void subOnlineCount() {
        WebSocketServer.onlineCount--;
    }


}

参考：链接

方式二：

package chunxiao.mqttdemo.mqttdemo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.*;

/**
 * @Author: changwensong
 * @Date: 2020/5/21 15:13
 */

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableSimpleBroker("/topic");
    }

}


package chunxiao.mqttdemo.mqttdemo.controller;

import chunxiao.mqttdemo.mqttdemo.vo.ChatMessage;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.Payload;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessageHeaderAccessor;
import org.springframework.stereotype.Controller;

/**
 * @Author: changwensong
 * @Date: 2020/5/27 13:48
 */
@Controller
public class ChatController {

    @MessageMapping("/chat.sendMessage")
    @SendTo("/topic/public")
    public ChatMessage sendMessage(@Payload ChatMessage chatMessage) {
        return chatMessage;
    }

    @MessageMapping("/chat.addUser")
    @SendTo("/topic/public")
    public ChatMessage addUser(@Payload ChatMessage chatMessage,
                               SimpMessageHeaderAccessor headerAccessor) {
        // Add username in web socket session
        headerAccessor.getSessionAttributes().put("username", chatMessage.getSender());
        return chatMessage;
    }

}


package chunxiao.mqttdemo.mqttdemo.controller;

import chunxiao.mqttdemo.mqttdemo.vo.ChatMessage;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.event.EventListener;
import org.springframework.messaging.simp.SimpMessageSendingOperations;
import org.springframework.messaging.simp.stomp.StompHeaderAccessor;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.messaging.SessionConnectedEvent;
import org.springframework.web.socket.messaging.SessionDisconnectEvent;

/**
 * @Author: changwensong
 * @Date: 2020/5/27 13:50
 */
@Component
public class WebSocketEventListener {

    private static final Logger logger = LoggerFactory.getLogger(WebSocketEventListener.class);

    @Autowired
    private SimpMessageSendingOperations messagingTemplate;

    @EventListener
    public void handleWebSocketConnectListener(SessionConnectedEvent event) {
        logger.info("Received a new web socket connection");
    }

    @EventListener
    public void handleWebSocketDisconnectListener(SessionDisconnectEvent event) {
        StompHeaderAccessor headerAccessor = StompHeaderAccessor.wrap(event.getMessage());

        String username = (String) headerAccessor.getSessionAttributes().get("username");
        if(username != null) {
            logger.info("User Disconnected : " + username);

            ChatMessage chatMessage = new ChatMessage();
            chatMessage.setType(ChatMessage.MessageType.LEAVE);
            chatMessage.setSender(username);

            messagingTemplate.convertAndSend("/topic/public", chatMessage);
        }
    }

}


package chunxiao.mqttdemo.mqttdemo.vo;

/**
 * @Author: changwensong
 * @Date: 2020/5/27 13:44
 */
public class ChatMessage {

    private MessageType type;
    private String content;
    private String sender;

    public enum MessageType {
        CHAT,
        JOIN,
        LEAVE
    }

    public MessageType getType() {
        return type;
    }

    public void setType(MessageType type) {
        this.type = type;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getSender() {
        return sender;
    }

    public void setSender(String sender) {
        this.sender = sender;
    }
}

新建文件main.css

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,body {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.58;
    color: #333;
    background-color: #f4f4f4;
    height: 100%;
}

body:before {
    height: 50%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #128ff2;
    content: "";
    z-index: 0;
}

.clearfix:after {
    display: block;
    content: "";
    clear: both;
}

.hidden {
    display: none;
}

.form-control {
    width: 100%;
    min-height: 38px;
    font-size: 15px;
    border: 1px solid #c8c8c8;
}

.form-group {
    margin-bottom: 15px;
}

input {
    padding-left: 10px;
    outline: none;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 20px;
    margin-bottom: 20px;
}

h1 {
    font-size: 1.7em;
}

a {
    color: #128ff2;
}

button {
    box-shadow: none;
    border: 1px solid transparent;
    font-size: 14px;
    outline: none;
    line-height: 100%;
    white-space: nowrap;
    vertical-align: middle;
    padding: 0.6rem 1rem;
    border-radius: 2px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    min-height: 38px;
}

button.default {
    background-color: #e8e8e8;
    color: #333;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
}

button.primary {
    background-color: #128ff2;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
    color: #fff;
}

button.accent {
    background-color: #ff4743;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12);
    color: #fff;
}

#username-page {
    text-align: center;
}

.username-page-container {
    background: #fff;
    box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27);
    border-radius: 2px;
    width: 100%;
    max-width: 500px;
    display: inline-block;
    margin-top: 42px;
    vertical-align: middle;
    position: relative;
    padding: 35px 55px 35px;
    min-height: 250px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -160px;
}

.username-page-container .username-submit {
    margin-top: 10px;
}


#chat-page {
    position: relative;
    height: 100%;
}

.chat-container {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27);
    margin-top: 30px;
    height: calc(100% - 60px);
    max-height: 600px;
    position: relative;
}

#chat-page ul {
    list-style-type: none;
    background-color: #FFF;
    margin: 0;
    overflow: auto;
    overflow-y: scroll;
    padding: 0 20px 0px 20px;
    height: calc(100% - 150px);
}

#chat-page #messageForm {
    padding: 20px;
}

#chat-page ul li {
    line-height: 1.5rem;
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid #f4f4f4;
}

#chat-page ul li p {
    margin: 0;
}

#chat-page .event-message {
    width: 100%;
    text-align: center;
    clear: both;
}

#chat-page .event-message p {
    color: #777;
    font-size: 14px;
    word-wrap: break-word;
}

#chat-page .chat-message {
    padding-left: 68px;
    position: relative;
}

#chat-page .chat-message i {
    position: absolute;
    width: 42px;
    height: 42px;
    overflow: hidden;
    left: 10px;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    line-height: 42px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    font-style: normal;
    text-transform: uppercase;
}

#chat-page .chat-message span {
    color: #333;
    font-weight: 600;
}

#chat-page .chat-message p {
    color: #43464b;
}

#messageForm .input-group input {
    float: left;
    width: calc(100% - 85px);
}

#messageForm .input-group button {
    float: left;
    width: 80px;
    height: 38px;
    margin-left: 5px;
}

.chat-header {
    text-align: center;
    padding: 15px;
    border-bottom: 1px solid #ececec;
}

.chat-header h2 {
    margin: 0;
    font-weight: 500;
}

.connecting {
    padding-top: 5px;
    text-align: center;
    color: #777;
    position: absolute;
    top: 65px;
    width: 100%;
}


@media screen and (max-width: 730px) {

    .chat-container {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 10px;
    }
}

@media screen and (max-width: 480px) {
    .chat-container {
        height: calc(100% - 30px);
    }

    .username-page-container {
        width: auto;
        margin-left: 15px;
        margin-right: 15px;
        padding: 25px;
    }

    #chat-page ul {
        height: calc(100% - 120px);
    }

    #messageForm .input-group button {
        width: 65px;
    }

    #messageForm .input-group input {
        width: calc(100% - 70px);
    }

    .chat-header {
        padding: 10px;
    }

    .connecting {
        top: 60px;
    }

    .chat-header h2 {
        font-size: 1.1em;
    }
}

新建文件main.js

'use strict';

var usernamePage = document.querySelector('#username-page');
var chatPage = document.querySelector('#chat-page');
var usernameForm = document.querySelector('#usernameForm');
var messageForm = document.querySelector('#messageForm');
var messageInput = document.querySelector('#message');
var messageArea = document.querySelector('#messageArea');
var connectingElement = document.querySelector('.connecting');

var stompClient = null;
var username = null;

var colors = [
    '#2196F3', '#32c787', '#00BCD4', '#ff5652',
    '#ffc107', '#ff85af', '#FF9800', '#39bbb0'
];

function connect(event) {
    username = document.querySelector('#name').value.trim();

    if(username) {
        usernamePage.classList.add('hidden');
        chatPage.classList.remove('hidden');

        var socket = new SockJS('/ws');
        stompClient = Stomp.over(socket);

        stompClient.connect({}, onConnected, onError);
    }
    event.preventDefault();
}


function onConnected() {
    // Subscribe to the Public Topic
    stompClient.subscribe('/topic/public', onMessageReceived);

    // Tell your username to the server
    stompClient.send("/app/chat.addUser",
        {},
        JSON.stringify({sender: username, type: 'JOIN'})
    )

    connectingElement.classList.add('hidden');
}


function onError(error) {
    connectingElement.textContent = 'Could not connect to WebSocket server. Please refresh this page to try again!';
    connectingElement.style.color = 'red';
}


function sendMessage(event) {
    var messageContent = messageInput.value.trim();
    if(messageContent && stompClient) {
        var chatMessage = {
            sender: username,
            content: messageInput.value,
            type: 'CHAT'
        };
        stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(chatMessage));
        messageInput.value = '';
    }
    event.preventDefault();
}


function onMessageReceived(payload) {
    var message = JSON.parse(payload.body);

    var messageElement = document.createElement('li');

    if(message.type === 'JOIN') {
        messageElement.classList.add('event-message');
        message.content = message.sender + ' 已上线!';
    } else if (message.type === 'LEAVE') {
        messageElement.classList.add('event-message');
        message.content = message.sender + ' 已下线!';
    } else {
        messageElement.classList.add('chat-message');

        var avatarElement = document.createElement('i');
        var avatarText = document.createTextNode(message.sender[0]);
        avatarElement.appendChild(avatarText);
        avatarElement.style['background-color'] = getAvatarColor(message.sender);

        messageElement.appendChild(avatarElement);

        var usernameElement = document.createElement('span');
        var usernameText = document.createTextNode(message.sender);
        usernameElement.appendChild(usernameText);
        messageElement.appendChild(usernameElement);
    }

    var textElement = document.createElement('p');
    var messageText = document.createTextNode(message.content);
    textElement.appendChild(messageText);

    messageElement.appendChild(textElement);

    messageArea.appendChild(messageElement);
    messageArea.scrollTop = messageArea.scrollHeight;
}


function getAvatarColor(messageSender) {
    var hash = 0;
    for (var i = 0; i < messageSender.length; i++) {
        hash = 31 * hash + messageSender.charCodeAt(i);
    }
    var index = Math.abs(hash % colors.length);
    return colors[index];
}

usernameForm.addEventListener('submit', connect, true)
messageForm.addEventListener('submit', sendMessage, true)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <meta charset="UTF-8">
    <title>Spring Boot WebSocket Chat Application</title>
    <link rel="stylesheet" href="/css/main.css" />
</head>
<body>
<noscript>
    <h2>Sorry! Your browser doesn't support Javascript</h2>
</noscript>

<div id="username-page">
    <div class="username-page-container">
        <h1 class="title">Type your username</h1>
        <form id="usernameForm" name="usernameForm">
            <div class="form-group">
                <input type="text" id="name" placeholder="Username" autocomplete="off" class="form-control" />
            </div>
            <div class="form-group">
                <button type="submit" class="accent username-submit">Start Chatting</button>
            </div>
        </form>
    </div>
</div>

<div id="chat-page" class="hidden">
    <div class="chat-container">
        <div class="chat-header">
            <h2>Spring WebSocket Chat Demo</h2>
        </div>
        <div class="connecting">
            Connecting...
        </div>
        <ul id="messageArea">

        </ul>
        <form id="messageForm" name="messageForm">
            <div class="form-group">
                <div class="input-group clearfix">
                    <input type="text" id="message" placeholder="Type a message..." autocomplete="off" class="form-control"/>
                    <button type="submit" class="primary">Send</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>

方式二代码结构如下：
在这里插入图片描述

小可乐-我一直在
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【十五】springboot整合WebSocket实现聊天室
weixin_56995925的博客
10-08 2万+
springboot整合WebSocket实现聊天室
SpringBoot构建聊天室Web应用
禅与计算机程序设计艺术
07-30 1933
聊天室（英文名称: Chat Room），是一种多用户在线交流的工具，利用计算机网络技术，实现两个或多个人之间互相发送及接收信息。最初由美国计算机科学家托马斯·莫尔斯首先提出，是一种即时通信工具，但目前已成为网上生活中不可缺少的一部分。
Springboot + Redis发布订阅模式实现简陋版聊天室
whiteBearClimb的博客
03-05 1133
安装redis就不写了，直接开启redis服务。 （1）去到我自己Mac 电脑的安装目录下 cd /usr/local/bin （2）开启：redis-server 成功了。 SpringBoot中pom.xml文件添加redis的依赖包： <dependency> <groupId>org.springframework.boot</groupId&...
基于Sping Boot集成的websocket实现聊天室
最新发布
小蜜蜂vs码农
04-29 903
上面的示例中，我们使用 @ServerEndpoint("/chat/{username}") 注解监听此地址的 WebSocket 信息，客户端也是通过此地址向服务端接收和发送消息。上面的示例中，js中定义了WebSocket通讯相关的代码，如：ws.onopen、ws.onmessage、ws.onclose等事件。然后，分别在三个聊天室页面中，输入三个昵称并加入聊天室，与服务端成功建立WebSocket连接，即可在聊天室发送消息。前面，我们已经把整个WebSocket聊天室的前后台功能介绍完了。
redis实战系列4--使用redis+springboot构建社交app后台(1)
zisuu的博客
04-09 228
说明: 这一套开发是基于springboot的redisTemplate开发的,主要用到了redis的zset,hash 本文主要讲解redis的表格,具体的开发流程在后序文章中 下面是redis表: 1 home:id–(个人的主页时间线—(包括关注者发布的动态以及自己发布的动态)),其中Id代表用户的id 存储结构:zset,如下 statusId–timestamp statusId指动态的...
springboot+websocket构建在线聊天室（群聊+单聊）
热门推荐
小牛呼噜噜的博客
09-08 4万+
本系列文章： 1、springboot+websocket构建在线聊天室（群聊+单聊） 2、SpringBoot+STOMP 实现聊天室（单聊+多聊）及群发消息详解 3、websocket stomp+rabbitmq实现消息推送 目录 1、群聊+显示昵称 1.1、原理 1.2、编码分析 1.3、群聊 功能实现 1.3.1、引入依赖 1.3.2、注入ServerEndpoint...
Springboot + Websocket的集成实现简单的聊天室功能
weixin_44315733的博客
08-19 1972
WebSocket是一种网络通信协议，它可以在单个TCP连接上实现双向（全双工）通信。WebSocket使用HTML5标准，并且可以在客户端和服务器之间建立持久连接，这意味着连接在浏览器刷新或关闭后仍然保持打开状态。WebSocket的主要优点包括：1. 双向通信：WebSocket支持客户端和服务器之间的双向通信，这使得实时数据传输变得非常容易。2. 持久连接：WebSocket使用单个TCP连接，这使得服务器可以保持与客户端的通信，即使浏览器被关闭或刷新。
springboot集成websocket实现一个简易聊天室
03-28
在本文中，我们将深入探讨如何使用Spring Boot集成WebSocket来创建一个简单的聊天室应用。WebSocket是一种在客户端和服务器之间建立持久连接的协议，允许双向通信，从而实现实时数据传输。Spring Boot，作为Java生态...
springboot搭建的简易聊天室demo
02-26
总之，这个基于Spring Boot的简易聊天室示例结合了WebSocket的实时通信能力和Redis的高效数据存储，提供了一个可扩展的基础架构。你可以根据实际需求进一步完善它，例如增加用户认证、消息持久化、聊天记录查询等...
基于netty-socketio的简易聊天室.zip
02-26
本项目“基于netty-socketio的简易聊天室”利用了SpringBoot框架和Socket.IO库，构建了一个简单的多人在线聊天平台。下面将详细阐述相关知识点。 首先，**Socket.IO** 是一个为实时应用提供跨平台兼容的库，它允许...
websocket简易聊天室
01-29
在"websocket简易聊天室"项目中，我们可以看到它基于SpringBoot框架实现。SpringBoot是Java开发的一个流行框架，它简化了创建独立的、生产级别的基于Spring的应用程序的过程。通过集成大量默认配置，SpringBoot使得...
web端qq聊天室.rar
09-12
本项目——"web端qq聊天室"，便是利用流行的SpringBoot框架，为用户打造了一个简易版的在线聊天平台。它集成了注册登录、未读消息提示、单聊、群聊、好友管理以及图片发送等多种功能，旨在提供便捷、高效的沟通体验...
聊聊(chatchat)基于SpringBoot的多人在线聊天室
qq_39662124的博客
12-28 1729
本项目实现了一个多人在线聊天室，拥有以下功能。支持用户账号密码登录、注册。实时发起群聊或单独聊天。实时接收单独聊天消息与群聊消息。聊天记录存储于数据库，可查看历史消息，翻阅历史记录。消息接收提醒。本项目采用前后端分离架构。前端基于Vue3框架，使用Element-Plus组件库、Axios、vue-router、pinia等技术开发。
Springboot+Mysql实现的在线聊天及聊天室系统
欧阳小白闯天涯
08-15 1965
在线系统是根据网络交友的实际情况按照网络化的需求开发的，它的目标非常明确，即通过建立在线聊天平台，将原来线下聊天的方式变成线上模式，使朋友之间聊天更加便捷、安全、规范和有针对性。系统功能需求整体上分为用户使用功能和系统管理功能，其中用户使用功能包括添加好友、用户登录、用户注册、发送消息、查看历史聊天记录、用户创建群组、用户查看个人信息等功能；系统管理功能包括管理员聊天和管理员管理系统设置等功能。根据以上功能需求分析，通过用例图来描述系统的主要功能。
【2023最新】SpringBoot整合WebSocket实现简易私聊聊天室
JAVA_EE_J的博客
05-08 2078
在比较早的时期，很多网站做一种实时推送的功能（服务端需要向客户端主动推送数据），所用的技术都是轮询/短轮询。轮询指的是客户端定期的向服务端发起HTTP请求来获取到服务端返回数据给客户端，WebSocket与轮询的区别如下： WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 把客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久
springboot集成websocket聊天室
qq_63431773的博客
07-29 364
WebSocket 是基于TCP/IP协议，独立于HTTP协议的通信协议。WebSocket 是双向通讯，有状态，客户端一（多）个与服务端一（多）双向实时响应（客户端 ⇄ 服务端）。WebSocket 是应用在浏览器的 Socket （是 Socket 模型接口的实现），Socket 是一个网络通信接口 （通信规范）。
springboot+websocket聊天室（私聊+群聊）
weixin_43165220的博客
07-26 4665
springboot+websocket聊天室，实现了私聊和群聊。
SpringBoot 使用WebSocket打造在线聊天室
Mr. David 专栏
11-08 715
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。2、浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。3、当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。添加 WebSocketConfig 配置。
【WebSocket】SpringBoot整合WebSocket实现聊天室（一）
qq_61903414的博客
07-07 1347
首先我们需要在项目中引入依赖，有两种方式。第一种我们可以在创建Spring Boot项目时搜索WebSocket然后勾选依赖第二种是我们可以直接在项目的pom.xml文件中插入以下依赖。
springboot怎么整合聊天室
08-25
- *1* *3* [SpringBoot整合WebSocket实现简易聊天室](https://blog.csdn.net/qq_29917503/article/details/128343049)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小可乐-我一直在

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值