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秒向客户端推送数据
以上内容仅仅是入门的简单介绍,具体的应用场景具体分析