1.SockJS用javascript实现的socket连接,兼容各种浏览器的WebSocket支持库
2.WebSocket是H5的,不支持H5的浏览器没法使用。
3.SockJS它提供类似于websocket的编程模式但是可以适应不同的浏览器(包括不支持websocket的浏览器)。

后端代码:

  1. <dependency>
  2. <groupId>org.springframework.boot</groupId>
  3. <artifactId>spring-boot-starter-websocket</artifactId>
  4. </dependency>
  1. package com.cesmart;
  2. import org.springframework.boot.SpringApplication;
  3. import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
  4. import org.springframework.context.ApplicationContext;
  5. import org.springframework.context.annotation.ComponentScan;
  6. @EnableAutoConfiguration
  7. @ComponentScan(basePackages = "com.cesmart") // 扫描那些包得到bean.@ComponentScan({"com.teradata.notification","com.teradata.dal"})
  8. public class Application {
  9. public static void main(String[] args) {
  10. ApplicationContext applicationContext = SpringApplication.run(Application.class, args);
  11. }
  12. }
  1. package com.cesmart.config;
  2. import org.springframework.web.socket.CloseStatus;
  3. import org.springframework.web.socket.TextMessage;
  4. import org.springframework.web.socket.WebSocketHandler;
  5. import org.springframework.web.socket.WebSocketMessage;
  6. import org.springframework.web.socket.WebSocketSession;
  7. public class MyHandler implements WebSocketHandler {
  8. // 连接继开处理
  9. @Override
  10. public void afterConnectionClosed(WebSocketSession arg0, CloseStatus arg1) throws Exception {
  11. // TODO Auto-generated method stub
  12. System.out.println("Connection closed..." + arg0.getRemoteAddress().toString());
  13. }
  14. // 连接建立处理
  15. @Override
  16. public void afterConnectionEstablished(WebSocketSession arg0) throws Exception {
  17. // TODO Auto-generated method stub
  18. System.out.println("Connection established..." + arg0.getRemoteAddress().toString());
  19. }
  20. // 接收、发送信息处理
  21. @Override
  22. public void handleMessage(WebSocketSession arg0, WebSocketMessage<?> arg1) throws Exception {
  23. // TODO Auto-generated method stub
  24. try {
  25. System.out.println("Req: " + arg1.getPayload());
  26. // 发送信息
  27. TextMessage returnMessage = new TextMessage(arg1.getPayload() + " received at server");
  28. arg0.sendMessage(returnMessage);
  29. } catch (Exception e) {
  30. e.printStackTrace();
  31. }
  32. }
  33. // 错误处理(客户端突然关闭等接收到的错误)
  34. @Override
  35. public void handleTransportError(WebSocketSession arg0, Throwable arg1) throws Exception {
  36. // TODO Auto-generated method stub
  37. if (arg0.isOpen()) {
  38. arg0.close();
  39. }
  40. System.out.println(arg1.toString());
  41. System.out.println("WS connection error,close...");
  42. }
  43. @Override
  44. public boolean supportsPartialMessages() {
  45. // TODO Auto-generated method stub
  46. return false;
  47. }
  48. }
  1. package com.cesmart.config;
  2. import java.util.Map;
  3. import org.springframework.http.server.ServerHttpRequest;
  4. import org.springframework.http.server.ServerHttpResponse;
  5. import org.springframework.web.socket.WebSocketHandler;
  6. import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;
  7. /**
  8. * 类描述:拦截器
  9. */
  10. public class MyHandshakeInterceptor extends HttpSessionHandshakeInterceptor {
  11. @Override
  12. public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
  13. Exception ex) {
  14. // TODO Auto-generated method stub
  15. System.out.println("After handshake " + request.getRemoteAddress().toString());
  16. super.afterHandshake(request, response, wsHandler, ex);
  17. }
  18. @Override
  19. public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler handler,
  20. Map<String, Object> map) throws Exception {
  21. // TODO Auto-generated method stub
  22. System.out.println("Before handshake " + request.getRemoteAddress().toString());
  23. return super.beforeHandshake(request, response, handler, map);
  24. }
  25. }
  1. package com.cesmart.config;
  2. import org.springframework.context.annotation.Bean;
  3. import org.springframework.context.annotation.Configuration;
  4. import org.springframework.web.socket.config.annotation.EnableWebSocket;
  5. import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
  6. import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
  7. @Configuration // 配置类
  8. @EnableWebSocket // 声明支持websocket
  9. public class WebSocketConfig implements WebSocketConfigurer {
  10. @Override
  11. public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
  12. // 注册websocket实现类,指定参数访问地址;allowed-origins="*" 允许跨域
  13. // addHandler是增加处理接口和设定URL
  14. // addInterceptors是增加拦截器处理(可以不用)
  15. registry.addHandler(myHandler(), "/ws").addInterceptors(myHandshake()).setAllowedOrigins("*");
  16. registry.addHandler(myHandler(), "/sockjs/ws").addInterceptors(myHandshake()).withSockJS();
  17. registry.addHandler(myHandler(), "/ws2").setAllowedOrigins("*");
  18. registry.addHandler(myHandler(), "/sockjs/ws2").setAllowedOrigins("*").withSockJS();
  19. }
  20. @Bean
  21. public MyHandler myHandler() {
  22. return new MyHandler();
  23. }
  24. @Bean
  25. public MyHandshakeInterceptor myHandshake() {
  26. return new MyHandshakeInterceptor();
  27. }
  28. }

前端代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript" src="//cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>
  7. <script type="text/javascript">
  8. var url = "127.0.0.1:8090/";
  9. var websocket = null;
  10. if ('WebSocket' in window) {
  11. websocket = new WebSocket("ws://" + url + "/ws");//建立连接
  12. } else {
  13. websocket = new SockJS("http://" + url + "/sockjs/ws");//建立连接
  14. }
  15. //建立连接处理
  16. websocket.onopen = onOpen;
  17. //接收处理
  18. websocket.onmessage = onMessage;
  19. //错误处理
  20. websocket.onerror = onError;
  21. //断开连接处理
  22. websocket.onclose = onClose;
  23. function onOpen(openEvent) {
  24. document.getElementById("console").innerHTML = document.getElementById("console").innerHTML+ "OPEN<br/>";
  25. }
  26. function onMessage(event) {
  27. document.getElementById("console").innerHTML = document.getElementById("console").innerHTML+ event.data+"<br/>";
  28. }
  29. function onError() {
  30. }
  31. function onClose() {
  32. document.getElementById("console").innerHTML = document.getElementById("console").innerHTML+ "CLOSE<br/>";
  33. }
  34. function doSend() {
  35. console.log(websocket.readyState);
  36. if (websocket.readyState == SockJS.OPEN) {
  37. var msg = document.getElementById("message").value;
  38. //发送消息
  39. websocket.send(msg);
  40. } else {
  41. alert("连接失败!");
  42. }
  43. }
  44. function disconnect(){
  45. if (websocket != null) {
  46. websocket.close();
  47. websocket = null;
  48. }
  49. }
  50. function reconnect(){
  51. if (websocket != null) {
  52. websocket.close();
  53. websocket = null;
  54. }
  55. if ('WebSocket' in window) {
  56. websocket = new WebSocket("ws://" + url + "/ws");
  57. } else {
  58. websocket = new SockJS("http://" + url + "/sockjs/ws");
  59. }
  60. websocket.onopen = onOpen;
  61. websocket.onmessage = onMessage;
  62. websocket.onerror = onError;
  63. websocket.onclose = onClose;
  64. }
  65. </script>
  66. </head>
  67. <body>
  68. <div>
  69. <button id="disconnect" onclick="disconnect()">断开连接</button>
  70. <button id="send" onclick="doSend()">发送消息</button>
  71. <button id="reconnect" onclick="reconnect()">重新连接</button>
  72. </div>
  73. <div>
  74. <textarea id="message" style="width: 350px">Here is a message!</textarea>
  75. </div>
  76. <div>日志信息:</div>
  77. <p id="console" width="600px"></p>
  78. </body>
  79. </html>

参考(websocket简单应用):http://wiselyman.iteye.com/blog/2003336
参考(应用例子):http://768992698.iteye.com/blog/2338250
参考(应用例子(TextWebSocketHandler )):http://www.cnblogs.com/likun10579/p/5594828.html

最新文章

  1. 视觉机器学习读书笔记--------SVM方法
  2. linux-------------linux的scp
  3. 开始使用MarkDown写博客
  4. com组件远程桌面rdp模块的调用
  5. 设计模式-原型模式(Prototype)
  6. MCC(移动国家码)和 MNC(移动网络码)
  7. LeetCode题解——Add Two Numbers
  8. StoryBoard 设置TabBar SelectImage 和tintColor
  9. Android开发中如何解决加载大图片时内存溢出的问题
  10. Android编程获取网络连接状态及调用网络配置界面
  11. FileOutputStream字节输出流和FileInputStream输入流(切记:out是输出到本地中,in是输入到程序中)这里介绍大文件和小文件的读取方式
  12. 【Spark2.0源码学习】-3.Endpoint模型介绍
  13. 关于前端HTML你需要知道的一切
  14. nginx + lua 限制ip地址访问
  15. 通过Referer设置来防盗链
  16. 【转载】 Jointwave零延时视频传输for FPGA/ASIC进入军工领域
  17. Docker命令详解(build篇)
  18. 第三方插件Vue-Lazyload
  19. window7下 cmd命令行 Mysql导出表结构 + 表数据
  20. [Unity]用PropertyDrawer自定义struct/class的外观

热门文章

  1. [LeetCode] 61. Rotate List 旋转链表
  2. 【编程开发】x86,I386,i686, x86_64, x64,amd64、Windows Linux AIX下查看CPU位数和操作系统位数、rpm包名
  3. 【神经网络与深度学习】【CUDA开发】服务器(多GPU)caffe安装和编译
  4. Qt deletelater函数分析(2)
  5. Windows 下升级 node &amp; npm 到最新版本
  6. Docker部署ELK 7.0.1集群之Elasticsearch安装介绍
  7. (一)线性表(linear list)
  8. 在iis中部署网站出现的错误
  9. C语言单链表简单实现(简单程序复杂化)
  10. 中国大学MOOC-翁恺-C语言程序设计习题集(二)