温馨代码~寄托对你的思念


We are family

  • 德意 落苏谣
  • 小蜗牛 小精灵

小精灵,小蜗牛想对你说,“ 有你真好 ”!
有你的每一天,都非常的充实,每一天都充满着期待,我们分享彼此的故事,彼此云学习、云上班、云看夕阳落下……是那么的舒适愉悦。你总是在不经意之间就跑进我的脑袋,然后就陷入了对你的思念!夜已深,躺在床上,此时你又跑入了我的脑海,脑海里回想起我们规划去旅行,想起你叫我小蜗牛,我叫你小精灵,内心是暖暖的,欣喜的。突发奇想,写一个小代码,纪念这美妙的时刻,我的小精灵,小蜗牛与小精灵的精彩时刻。

夏雨雪时光


温馨代码,寄托我对你的思念......\color{red}{You} \color{red}{and} \color{red}{Me}

德意 落苏谣 小蜗牛 小精灵
we are family

we are family

we are family

 0、项目框架
    主要包括:Message、WebSocketConfig、GreetController、chat.html
总体结构
1、配置pom.xml
   核心:jquery、stomp-websocket、sockjs-client、webjars-locator-core
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator-core</artifactId>
            <version>0.46</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>sockjs-client</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>stomp-websocket</artifactId>
            <version>2.3.3</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.5.1</version>
        </dependency>
2、配置实体类Message.java
package com.example.demo03.bean;
/**
 * @Author 刘德意
 * @create 2020/8/7
 */
public class Message {
    private String name;
    private String content;

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
}
夏雨雪时光
3、WebSocketConfig.java
package com.example.demo03.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
/**
 * @Author 刘德意
 * @create 2020/8/7
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat").withSockJS();
    }
}
4、GreetingController.java
package com.example.demo03.controller;

import com.example.demo03.bean.Message;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
/**
 * @Author 刘德意
 * @create 2020/8/7
 */
@Controller
public class GreetingController {
    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Message greeting(Message message){
        return message;
    }
}
5、前端交互界面chat.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群聊</title>
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
</head>
<body>
<table>
    <tr>
        <td>请输入用户名:</td>
        <td><input id="name" type="text"></td>
    </tr>
    <tr>
        <td><input id="connect" type="button" value="连接" ></td>
        <td><input id="disconnect" type="button" disabled="disabled" value="断开连接" ></td>
    </tr>
</table>

<div id="chat" style="display: none">
    <table>
        <tr>
            <td>请输入聊天内容:</td>
            <td><input id="content" type="text"></td>
            <td><input id="send" type="button"  value="发送"></td>
        </tr>
    </table>
    <div id="conversation">群聊进行中...</div>
</div>

//java script定义点击的各类函数
<script>
$(function () {
    $("#connect").click(function () {
        connect();
    })
    $("#disconnect").click(function () {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
    })
    $("#send").click(function () {
        stompClient.send('/app/hello',{},JSON.stringify({'name':$("#name").val(),'content':$("#content").val()}))
    })
})
    var stompClient = null;
    function connect() {
        if (!$("#name").val()) {
            return;
        }
        var socket = new SockJS("/chat");
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (success) {
            setConnected(true);
            stompClient.subscribe("/topic/greetings",function (msg) {
                showGreeting(JSON.parse(msg.body));
            });
        })
    }
    function showGreeting(msg) {
        $("#conversation").append('<div>'+msg.name+':'+msg.content+'</div>')
    }
    function setConnected(flag) {
        $("#connect").prop("disabled",flag);
        $("#disconnect").prop("disabled",!flag);
        if (flag) {
            $("#chat").show();
        }else{
            $("#chat").hide();
        }
    }
</script>
</body>
</html>

夏雨雪时光

\color{red}{You} \color{red}{and} \color{red}{Me}
\color{red}{你是我永远的小精灵,爱你的小蜗牛!}
\color{red}{希望我的小精灵每天都是开心的小精灵!}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。