基于 SpringBoot 和 webSocket 的匿名聊天室

项目结构：

1).pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.hsp</groupId><artifactId>SpringBootWebSocket</artifactId><packaging>war</packaging><version>0.0.1-SNAPSHOT</version><name>SpringBootWebSocket</name><url>http://maven.apache.org</url><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.2.RELEASE</version></parent><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><dependency><groupId>org.webjars</groupId><artifactId>webjars-locator</artifactId></dependency><dependency><groupId>org.webjars</groupId><artifactId>sockjs-client</artifactId><version>1.0.2</version></dependency><dependency><groupId>org.webjars</groupId><artifactId>stomp-websocket</artifactId><version>2.3.3</version></dependency><dependency><groupId>org.webjars</groupId><artifactId>bootstrap</artifactId><version>3.3.7</version></dependency><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.1.0</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1-b07</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins><finalName>SpringBootWebSocket</finalName></build>
</project>

2).Message.java

package com.chat;public class Message {private String content;public Message() {}public Message(String content) {this.content = content;}public String getContent() {return content;}public void setContent(String content) {this.content = content;}}

3).ChattingController.java

package com.chat;import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestParam;@Controller
public class ChattingController {// /chatting的处理函数@MessageMapping("/chatting")//将结果发送到/chat/message@SendTo("/chat/message")//这里传进的参数是Message对象，对应的键是content，//所以后台的Message对象一定要有content属性public Message chatting(Message message) throws Exception {//停1秒，让后台有时间去处理消息Thread.sleep(1000); //返回Message的json形式return new Message(message.getContent());}}

4).WebSocketConfig.java

package com.chat;import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {//namespace 返回数据时加/chatconfig.enableSimpleBroker("/chat");//namespace 经过controller的方法的路径都要加/appconfig.setApplicationDestinationPrefixes("/app");}//注册websocketpublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/websocket").withSockJS();}}

5).index.html

<!DOCTYPE html>
<html>
<head><title>Chatting room</title><link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="/main.css" rel="stylesheet"><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><script src="/app.js"></script>
</head>
<body>
<div id="main-content" class="container"><div class="row"><div class="col-md-6"><form class="form-inline"><div class="form-group"><label for="connect">加入聊天室</label><button id="connect" class="btn btn-default" type="submit">加入</button><button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">退出</button></div></form></div><div class="col-md-6"><form class="form-inline"><div class="form-group"><label for="content">发信息</label><input type="text" id="content" class="form-control" placeholder="message..."></div><button id="send" class="btn btn-default" type="submit">Send</button></form></div></div><div class="row"><div class="col-md-12"><table id="conversation" class="table table-striped"><thead><tr><th>聊天记录</th></tr></thead><tbody id="messages"></tbody></table></div></div></form>
</div>
</body>
</html>

6).main.css

body {background-color: #f5f5f5;
}#main-content {max-width: 940px;padding: 2em 3em;margin: 0 auto 20px;background-color: #fff;border: 1px solid #e5e5e5;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
}

7).app.js

var stompClient = null;//控制连接函数
function setConnected(connected) {$("#connect").prop("disabled", connected);$("#disconnect").prop("disabled", !connected);if (connected) {$("#conversation").show();}else {$("#conversation").hide();}$("#messages").html("");
}//如果连接就创建stompClient
function connect() {//创建一个SockJSvar socket = new SockJS('/websocket');//使用Stomp协议stompClient = Stomp.over(socket);stompClient.connect({}, function (frame) {setConnected(true);console.log('Connected: ' + frame);//接收controller传回来的数据并解析stompClient.subscribe('/chat/message', function (chatting) {//chatting是controller对应的处理函数的方法//content是后台传回来的Message对象的属性showMessage(JSON.parse(chatting.body).content);});});
}//不连接就销毁stompClient
function disconnect() {if (stompClient != null) {stompClient.disconnect();}setConnected(false);console.log("Disconnected");
}//发送信息
function sendMessage() {//键一定要content！必须和后台接收对象的属性一致stompClient.send("/app/chatting", {}, JSON.stringify({'content': $("#content").val()}));
}//显示消息
function showMessage(message) {$("#messages").append("<tr><td>" + message + "</td></tr>");
}//控制函数
$(function () {$("form").on('submit', function (e) {e.preventDefault();});$( "#connect" ).click(function() { connect(); });$( "#disconnect" ).click(function() { disconnect(); });$( "#send" ).click(function() { sendMessage(); });
});

8).Application.java

package com.chat;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class Application {public static void main(String[] args) {SpringApplication.run(Application.class, args);}
}

9).测试，在浏览器输入：http://localhost:8080/

代码是参考spring官网的资料：https://spring.io/guides/gs/messaging-stomp-websocket/

基于 SpringBoot 和 webSocket 的匿名聊天室相关推荐

基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...
SpringBoot与webSocket实现在线聊天室——实现私聊+群聊+聊天记录保存
SpringBoot与webSocket实现在线聊天室--实现私聊+群聊+聊天记录保存引用参考:原文章地址:https://blog.csdn.net/qq_41463655/article/det ...
SpringBoot 使用WebSocket打造在线聊天室（基于注解）
点击上方"好好学java",选择"置顶公众号" 优秀学习资源.干货第一时间送达! 精彩内容 java实战练习项目教程 2018微服务资源springboot.s ...
[源码和文档分享]基于Netty和WebSocket的Web聊天室
一.背景伴随着Internet的发展与宽带技术的普及,人们可以通过Internet交换动态数据,展示新产品,与人进行沟通并进行电子商务贸易.作为构成网站的重要组成部分,留言管理系统为人们的交流提供了 ...
SpringBoot整合WebSocket实现简易聊天室
文章目录什么是WebSocket ? WebSocket通信模型为什么需要WebSocket Websocket与http的关系 SpringBoot集成WebSocket 什么是WebSocke ...
workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）...
workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...
SpringBoot +WebSocket实现简单聊天室功能实例
SpringBoot +WebSocket实现简单聊天室功能实例) 一.代码来源二.依赖下载三.数据库准备(sql) 数据库建表并插入sql 四.resources文件配置 application ...
springboot+websocket构建在线聊天室（群聊+单聊）
系列导读: 1.springboot+websocket构建在线聊天室(群聊+单聊) 2.Spring Boot WebSocket:单聊(实现思路) 3.Websocket Stomp+Rabbit ...
php即时聊天的框架_workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）...
workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...
使用WebSocket实现网页聊天室
使用WebSocket实现网页聊天室一.文章导读服务器推送你还在使用轮询吗?本文将带你领略WebSocket的魅力,轻松实现服务器推送功能.本文将以下面两方面让你理解WebSocket并应用到具体 ...

基于 SpringBoot 和 webSocket 的匿名聊天室

基于 SpringBoot 和 webSocket 的匿名聊天室相关推荐

最新文章

热门文章