WebSocket的简单应用

1、WebSocket简单介绍

WebSocket是html5规范中的一个部分,它借鉴了socket这种思想,为web应用程序客户端和服务端之间(注意是客户端服务端)提供了一种全双工通信机制。同时,它又是一种新的应用层协议,WebSocket协议是为了提供web应用程序和服务端全双工通信而专门制定的一种应用层协议,通常它表示为:ws://echo.websocket.org/?encoding=text HTTP/1.1。通俗的讲,WebSocket 是一种新的网络通信协议,现在浏览器端很多高级功能都需要用到它

2、WebSocket的其他特点

1)建立在 TCP 协议之上,服务器端的实现比较容易;

2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器;

3)数据格式比较轻量,性能开销小,通信高效;

4)可以发送文本,也可以发送二进制数据;

5)没有同源限制,客户端可以与任意服务器通信;

6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL,形如:ws://example.com:80/some/path

3、服务端定时推送数据的简单应用

实现的原理:由于我们的场景是后端数据发生改变的时候向客户端发送数据,因此打开客户端应该执行的是post请求渲染后端数据,然后再创建一个websocket连接,当服务端数据发生改变的时候触发websocket向客户端推送数据,本案例为了方便调试,结合定时器的方式向客户端推送数据

1)当用户第一次打开客户端时候执行普通的post请求把所需要的数据渲染到页面
客户端:


 日期:

$(document).ready(function() {
 getTime(); //1.初始化数据
})
//获取服务端时间
function getTime(){
 $.post("/gettime",{},function(data){
 $("#date").val(data);
 })
}

服务端:

@RequestMapping("/gettime")
public String getTime() {
   SimpleDateFormat formatter = **new** SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
   String date = formatter.format(**new** Date());
   String msg = "返回时间" + date;
   return  msg;
}

2、使用WebSocket定时向前端推送消息
客户端:

function webSocketTest() {
  if ("WebSocket"  in window) {
  //请求Websocket的路径
  var ws = new WebSocket("ws://localhost/socket");
  //连接建立是触发
 ws.onopen = function() {
 console.log('连接成功');
  //Web Socket 已连接上,使用 send() 方法发送数据           
 };
  //客户端接受服务端数据时触发
  ws.onmessage = function(evt) {
 var received_msg = evt.data;
 onsole.log(received_msg);
 $('#date').val(received_msg);
 console.log("数据已接收...");
 };
  //连接关闭的时候触发
 ws.onclose = function() {
 console.log("连接已关闭...");
 };
  //通讯发生错误的时候触发
 ws.onerror = **function**(){
 console.log("通信发生错误时触发");
 }
 }else{
  // 浏览器不支持 WebSocket
 console.log("您的浏览器不支持 WebSocket!");
 }
}

服务端:

package com.sun.websocket;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public  class WebSocketConfig {
  @Bean
  public ServerEndpointExporter serverEndpointExporter(){
  return  new ServerEndpointExporter();
 }
}
package com.sun.websocket;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
/**
 * ServerEndpoint 
* 使用springboot的唯一区别是要@Component声明下,而使用独立容器是由容器自己管理websocket的, * 但在springboot中连容器都是spring管理的。
* 虽然@Component默认是单例模式的,但springboot还是会为每个websocket连接初始化一个bean,所以可以用一个静态Map保存起来。 */ @ServerEndpoint("/socket/{userno}") // WebSocket客户端建立连接的地址 @Component public class WebSocketServerEndpoint { private static Logger logger = LoggerFactory.getLogger(WebSocketServerEndpoint.class); /** * 存活的session集合(使用线程安全的map保存) */ private static Map sessionManger = new ConcurrentHashMap<>(); /** * 建立连接的回调方法,把用户的信息session保存在Map集合里面,方便后面的对所有的用户进行群发消息 * * @param session * 与客户端的WebSocket连接会话 */ @OnOpen public void onOpen(@PathParam("userno")String userno,Session session) { System.out.println("传递的的参数"+userno); sessionManger.put(session.getId(), session); logger.info("Websocket成功创建链接,用户sessionID:" + session.getId()); } /** * 收到客户端消息的回调方法,调用群发消息方法向客户端群发消息 * * @param message * 客户端传过来的消息 * @param session * 对应的session */ @OnMessage public void onMessage(String message, Session session) { logger.info("【websocket消息】收到客户端发来的消息:{}", message); sendMessageToAll(message); } /** * 发生错误的回调方法 * * @param session * 用户session * @param error */ @OnError public void onError(Session session, Throwable error) { logger.info("发生错误的sessionID为:" + session.getId()); error.printStackTrace(); } /** * 关闭连接的回调方法,当页面关闭的时候意味着就关闭一个websocke请求 */ @OnClose public void onClose(Session session) { sessionManger.remove(session.getId()); logger.info("sessionID为:" + session.getId() + "的用户断开链接"); } /** * 服务端向客户端单独推送消息的方法 * * @param session * @param message */ public static void sendMessage(Session session, String message) { try { session.getBasicRemote().sendText(message); ; } catch (IOException e) { e.printStackTrace(); } } /** * 服务端向客户段群发消息的方法 * * @param message */ public static void sendMessageToAll(String message) { sessionManger.forEach((sessionId, session) -> { sendMessage(session, message); }); } }
package com.sun.action;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.web.bind.annotation.RestController;
import com.sun.websocket.WebSocketServerEndpoint;
import com.sun.websocket2.MyHandler;
@RestController
public class MessagePush {
    @Scheduled(fixedRate=5000)
    public void test() throws Exception {
        Random rand = new Random();
        int i = rand.nextInt(100); // 产生一个0-100之间的随机数
        SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String date = formatter.format(new Date());
        // 返回数据信息,请求时间、返回数据时间、耗时
        String msg = "返回时间: " + date;
        //调用Websocket服务端向客户端发送消息的方法
        WebSocketServerEndpoint.sendMessageToAll(msg);
        }   
}

以上代码显示的就页面效果
第一次请求返回的数据


WebSocket创建连接后将会每5秒向客户端推送数据

以上内容仅仅是入门的简单介绍,具体的应用场景具体分析

你可能感兴趣的:(WebSocket的简单应用)