【视频 & 交流平台】
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
收拾行李,寻找最新的自己,有意向的可以将简历发送到如下邮箱:
阿里云欢迎您的加入。