【视频&交流平台】
http://study.163.com/course/introduction.htm?courseId=1004329008&utm_campaign=commission&utm_source=400000000155061&utm_medium=share
http://study.163.com/course/introduction.htm?courseId=1004638001&utm_campaign=commission&utm_source=400000000155061&utm_medium=share
https://gitee.com/happyangellxq520/spring-boot
http://412887952-qq-com.iteye.com/blog/2321532
前言:
在上一篇文章中对编码进行了简单的分析,这篇文章中要将要进入实际编码,主要是分服务端和客户端进行编码。
效果展示:
一、服务端
1.1 新建一个工程
取名为:spring-boot-websocket
1.2 引入依赖
在pom.xml文件中添加如下依赖:
<!-- spring boot 父节点依赖, 引入这个之后相关的引入就不需要添加version配置, spring boot会自动选择最合适的版本进行添加。 --> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.8.RELEASE</version> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> </properties> <dependencies> <!-- websocket :springboot的高级组件会自动引用基础的组件,像spring-boot-starter-websocket就引入了spring-boot-starter-web和spring-boot-starter,所以不要重复引入。 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> </dependencies>
spring-boot-starter-websocket中就会自动引入spring-boot-starter-web和spring-boot-starter,所以我们就不需要引入了。
1.3 注入ServerEndpointExporter
编写一个WebSocketConfig配置类,注入对象ServerEndpointExporter,这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint,代码如下:
/** * 要注入ServerEndpointExporter,这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint。 * @author Angel --守护天使 * @version v.0.1 * @date 2017年11月5日 */ @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
1.4 websocket的具体实现类
websocket的代码:
/** * websocket的具体实现类 * @author Angel --守护天使 * @version v.0.1 * @date 2017年11月5日 */ @ServerEndpoint(value = "/websocket") @Component public class MyWebSocket { //用来存放每个客户端对应的MyWebSocket对象。 private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>(); //与某个客户端的连接会话,需要通过它来给客户端发送数据 private Session session; /** * 连接建立成功调用的方法 */ @OnOpen public void onOpen(Session session) { this.session = session; webSocketSet.add(this); //加入set中 System.out.println("有新连接加入!当前在线人数为" + webSocketSet.size()); this.session.getAsyncRemote().sendText("恭喜您成功连接上WebSocket-->当前在线人数为:"+webSocketSet.size()); } /** * 连接关闭调用的方法 */ @OnClose public void onClose() { webSocketSet.remove(this); //从set中删除 System.out.println("有一连接关闭!当前在线人数为" + webSocketSet.size()); } /** * 收到客户端消息后调用的方法 * * @param message 客户端发送过来的消息*/ @OnMessage public void onMessage(String message, Session session) { System.out.println("来自客户端的消息:" + message); //群发消息 broadcast(message); } /** * 发生错误时调用 * */ @OnError public void onError(Session session, Throwable error) { System.out.println("发生错误"); error.printStackTrace(); } /** * 群发自定义消息 * */ public void broadcast(String message){ for (MyWebSocket item : webSocketSet) { //同步异步说明参考:http://blog.csdn.net/who_is_xiaoming/article/details/53287691 //this.session.getBasicRemote().sendText(message); item.session.getAsyncRemote().sendText(message);//异步发送消息. } } }
使用springboot的唯一区别是要@Component声明下,而使用独立容器是由容器自己管理websocket的,但在springboot中连容器都是spring管理的。
虽然@Component默认是单例模式的,但springboot还是会为每个websocket连接初始化一个bean,所以可以用一个静态set保存起来。
1.5 编写/访问控制
编写IndexController,可以访问地址/到index.html页面。
@Controller public class IndexController { @RequestMapping("/") public String index(){ return "index"; } }
1.6 编写启动类
@SpringBootApplication public class App { publicstaticvoid main(String[] args) { SpringApplication.run(App.class, args); } }
到这里服务的部分就编写完毕了,接下来就是客户端的代码了。
二、客户端
客户端的代码主要是放在index.html页面中,在页面中使用H5提供的WebSocket对象,具体如下代码(src/main/resources/templates/index.html):
<!DOCTYPE HTML> <html> <head> <title>My WebSocket</title> <style> #message{ margin-top:40px; border:1px solid gray; padding:20px; } </style> </head> <body> <button onclick="conectWebSocket()">连接WebSocket</button> <button onclick="closeWebSocket()">断开连接</button> <hr /> <br /> 消息:<input id="text" type="text" /> <button onclick="send()">发送消息</button> <div id="message"></div> </body> <script type="text/javascript"> var websocket = null; function conectWebSocket(){ //判断当前浏览器是否支持WebSocket if ('WebSocket'in window) { websocket = new WebSocket("ws://localhost:8080/websocket"); } else { alert('Not support websocket') } //连接发生错误的回调方法 websocket.onerror = function() { setMessageInnerHTML("error"); }; //连接成功建立的回调方法 websocket.onopen = function(event) { setMessageInnerHTML("Loc MSG: 成功建立连接"); } //接收到消息的回调方法 websocket.onmessage = function(event) { setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function() { setMessageInnerHTML("Loc MSG:关闭连接"); } //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function() { websocket.close(); } } //将消息显示在网页上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //关闭连接 function closeWebSocket() { websocket.close(); } //发送消息 function send() { var message = document.getElementById('text').value; websocket.send(message); } </script> </html>
三、运行测试
运行App.java启动程序,进行测试:
(1)打开浏览器访问地址http://127.0.0.1:8080/
(2)点击【连接WebSocket】,然后就可以发送消息了。
(3)打开另外一个浏览器或者直接打开一个TAB访问地址http://127.0.0.1:8080/
(4)点击【连接WebSocket】,然后就可以发送消息了。
(5)观察两边的信息打印,看是否可以接收到消息。
=============================================
阿里云
==============================================
岗位描述:
负责阿里云核心售卖链路优化、搭建售卖体系portal架构;同前端团队一起搭建全栈架构,快速推进业务落地。
1、主导业务、技术改造类项目的系统分析、设计工作,承担核心功能、公共核心模块的代码编写,确保项目进度和质量。
2、能提供架构、性能优化的解决方案,并主导平台和产品的快速迭代和优化。
3、参与系统架构设计、接口规范制定、技术文档编写等。
4、配合团队协同工作。
岗位要求:
1、具备扎实的Java基础,对JVM原理有扎实的理解;对Spring、MyBatis等开源框架熟悉,并能了解它的原理和机制,具有大型分布式系统设计研发经验。
2、熟悉基于Mysql、Oracle等关系数据库设计和开发、对数据库性能优化有丰富的经验。
3、熟悉底层中间件、分布式技术(如RCP框架、缓存、消息系统等)。
4、思路清晰,有良好的需求理解、分析、抽象能力和软件设计能力。
5、对技术有强烈的兴趣,喜欢钻研,具有良好的学习能力。
6、具备良好的沟通技能能力,团队合作能力以及推进工作执行,拿结果能力。
7、有前端开发经验者优先
招聘级别:
招聘级别P6/P7
收拾行李,寻找最新的自己,有意向的可以将简历发送到如下邮箱:
阿里云欢迎您的加入。
相关推荐
Spring Boot整合websocket实现群聊,音频发送,点对点聊天,图片发送。 Spring Boot整合websocket实现群聊,点对点聊天,图片发送,音频发送。 Spring Boot整合websocket实现群聊,点对点聊天,图片发送,音频发送 ...
Spring Boot整合websocket实现群聊,点对点聊天,图片发送,音频发送
一个基于Spring Boot + WebSocket + Redis,可快速开发的分布式即时通讯群聊系统。适用于直播间聊天、游戏内聊天、客服聊天等临时性群聊场景。 Java开发基于SpringBoot+WebSocket+Redis分布式即时通讯群聊系统。一...
基于Spring Boot+WebSocket+Redis开发的分布式即时通讯群聊系统源码+项目使用说明.zip 该项目是个人毕设项目源码,评分达到95分,都经过严格调试,确保可以运行!放心下载使用。 该项目资源主要针对计算机、自动化等...
SpringBoot整合websocket实现群聊
基于LayIM、Netty、Spring Boot 实现的在线聊天系统,web网络开发,可内嵌于自己的B/S系统或进行二次迭代 本项目是基于Netty实现的一个实时通讯系统,前端使用了LayIM组件。 技术栈 Spring Boot、Spring MVC、...
通过webSocket实现点对点,群聊,以及系统消息通讯,redis队列实现离线消息。
J-IM 是用JAVA语言,基于t-io开发的轻量、高性能、单机支持几十万至百万在线用户IM,主要目标降低即时通讯门槛,快速打造低成本接入在线IM系统,通过极简洁的消息格式就可以...群聊审核、公告、禁言开关、系统广播等。
Spring Boot netty nio WebSocket MyBatis Spring Data JPA Redis MySQL Spring Session Alibaba Druid Gradle 前端技术栈 Vue axios vue-router Vuex WebSocket vue-cli4 JavaScript ES6 npm 本项目是一个仿QQ基本...
使用WebSocket+SpringBoot搭建简易的多人聊天室 由浅入深,配合博客入门教程文章食用,风味独特。 使用WebSocket+SpringBoot搭建简易的多人聊天室 由浅入深,配合博客入门教程文章食用,风味独特。 使用WebSocket+...
人事管理人事管理系统(Spring Boot + ssm + jsp)有问题可加入群聊806221669pull代码请先star ~~~如果git无法正常拉取代码执行git config --global http.postBuffer 524288000再执行git config --global ...
使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理,以WebSocket+Socket.js+Stomp.js实现消息的发送与接收,监听。搭建FastDFS文件服务器用于保存图片,使用EasyExcel导出数据,使用Vue.js...
基于SpringBoot WebSocket的在线聊天系统,实现单窗口消息推送、群消息推送、上线提醒、Redis会话消息储存
websocket+springboot+mybatis-plus +html 实现在线聊天系统,支持群聊,私聊,登陆
聊天发图片,发视频,频道聊天,好友聊天,通过websocket实现 spring boot zfoo rpc mongodb 4.2 zookeeper 3.6.1 前端: PWA,自适应页面 service worker实现 vue, vuetify 百度和google页面统计 数据库和资源: ...
功能如下 - 用户管理:业务自己实现,暂从数据库添加 - 好友管理:添加好友、删除好友、修改备注...- 聊天模式:私聊、群聊 - 消息类型:系统、文本、语音、图片、视频 - 聊天管理:删除聊天、置顶聊天、查看聊天记录等
项目功能:登录注册、添加好友,创建群聊、单聊群聊、发送表情、发送图片、发送视频、上传文件、下载文件、查看好友群聊信息、删除会话、邀请加入群聊、管理个人信息、管理群聊信息、注销用户等等功能。 应用技术:...
项目简介:一个使用Layui开发的通讯录类似QQ的在线聊天系统,可以聊天、添加好友、群聊等功能,可以添加好友。 主要功能 两人之间私聊、多人之间的群聊 可以查看两人的聊天记录、群组的聊天记录 可以发送图片、...
项目说明:本博客是学习过程中建造的项目,为了融合更多知识点,让博客看起来更加高大上,使用了多个框架组合,有些也是企业级项目中常用的解决方式。多内容内容的,通常是xss攻击预防等安全方面的。...
基于netty结合Spring Boot搭建的一个简单WebSocket聊天室Demo,WebSocket消息路由基于个人设计的策略模式,由于前端不是专业的所以比较简陋。 快速开始 运行 ChatApplication 打开聊天窗口 私聊:打开两个chatroom....