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请求把所需要的数据渲染到页面
客户端：
<body>
日期：<input type=*"text"* id=*"date"* style="width:*800px*; height=500px"/>
</body>
$(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) {
//请求<u>Websocket</u>的路径
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 <br>
* 使用springboot的唯一区别是要@Component声明下，而使用独立容器是由容器自己管理websocket的，
* 但在springboot中连容器都是spring管理的。 </br>
* 虽然@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<String, Session> 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秒向客户端推送数据
以上内容仅仅是入门的简单介绍，具体的应用场景具体分析
网友评论