1、简介
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
2、特点
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据，支持双向通信，实时性更强。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
3、方案比较
ajax轮询
ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。
long poll
long poll 其实原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。
4、应用场景
后台服务端有事件主动上报，客户端只需接受，而不是轮询机制。
5、案例使用：
5.1、客户端
-
var websocket =
null;
-
-
//判断当前浏览器是否支持WebSocket
-
if (
'WebSocket'
in
window) {
-
//websocket = new WebSocket("ws://192.168.1.58:8080/plant/servlet/PushMessage");
-
websocket =
new WebSocket(
"ws://" + $(
"#webSocketIp").val() +
":" + $(
"#webSocketPort").val() +
"/plant/servlet/PushMessage");
-
}
-
else {
-
alert(
'Not support websocket')
-
}
-
-
//连接发生错误的回调方法
-
websocket.onerror =
function () {
-
-
};
-
-
//连接成功建立的回调方法
-
websocket.onopen =
function (event) {
-
-
};
-
-
//接收到消息的回调方法
-
websocket.onmessage =
function (event) {
-
var message =
eval(
"(" + event.data +
")");
//转换后的JSON对象
-
// alert(obj.name);//json name
-
var url =
window.location.href;
-
switch (message.header) {
-
case
"nodeOffline":
-
if (message.concentId == $(
"#concentId").val()) {
-
$(
"#onlineState").attr(
"src",
"images/photos/offline.png");
-
}
-
updateConcentLogs(message);
-
break;
-
case
"nodeOnline":
-
if (message.concentId == $(
"#concentId").val()) {
-
$(
"#onlineState").attr(
"src",
"images/photos/online.png");
-
}
-
updateConcentLogs(message);
-
break;
-
case
"sensorAlarm":
-
if (message.regionId == regionId) {
-
updateSensorAlarm(message);
-
}
-
break;
-
case
"sensorCurrentData":
-
if (message.schemeId == schemeId) {
-
if(url.indexOf(
"main")>
0){
-
drawCurrentData(message);
-
}
-
if(url.indexOf(
"monitor")>
0){
-
changeCurrentData(message);
-
}
-
-
}
-
break;
-
case
"deviceSwitchOperate":
-
//ionic对设备开关操作的推送
-
if (nodeId == message.nodeId) {
-
//如果当前显示界面显示的为推送过来的设备的开关状态，则改变其状态
-
switchState = message.switchState;
-
$(
"#deviceRow img").attr(
"src", switchState ?
"images/photos/switchOn.png" :
"images/photos/switchOff.png");
-
}
-
break;
-
case
"lampSwitchOperate":
-
//ionic对植物灯开关操作的推送
-
if (nodeId == message.nodeId) {
-
//如果当前显示界面显示的为推送过来的植物灯的开关状态，则改变其状态
-
switchState = message.switchState;
-
$(
"#lampRow img").attr(
"src", switchState ?
"images/photos/switchOn.png" :
"images/photos/switchOff.png");
-
}
-
break;
-
}
-
}
-
-
//连接关闭的回调方法
-
websocket.onclose =
function () {
-
-
}
-
-
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
-
window.onbeforeunload =
function () {
-
websocket.close();
-
}
-
-
-
//关闭连接
-
function closeWebSocket() {
-
websocket.close();
-
}
-
-
//发送消息
-
function send() {
-
var message =
document.getElementById(
'text').value;
-
websocket.send(message);
-
}
-
-
function formatEventType(concentEventType) {
-
var eventType =
'';
-
switch (concentEventType) {
-
case
"ON_LINE":
-
eventType =
"上线";
-
break;
-
case
"OFF_LINE":
-
eventType =
"下线";
-
break;
-
}
-
return eventType;
-
}
-
-
function updateConcentLogs(message) {
-
var timeItems = $(
"#concentLogs").find(
"div[class='time-item']");
-
if (timeItems.length >
0) {
-
var newFirst =
"" +
-
"<div class='time-item' >" +
-
"<div class='item-info'>" +
-
"<small class='text-muted'>" +
-
message.createTime +
-
"</small> " +
-
"<p><strong><a href='#' class='text-info'>" + message.concentName +
"</a></strong>" +
-
formatEventType(message.concentEventType) +
-
"</p> " +
-
"</div>" +
-
"</div>";
-
$(timeItems[
0]).before(newFirst);
-
$(timeItems[timeItems.length -
1]).remove();
-
}
-
}
-
-
function updateSensorAlarm(message) {
-
var timeItems = $(
"#sensorAlarm a");
-
if (timeItems.length >
0) {
-
var newFirst =
"<a href='#' class='dropdown-item notify-item'>" +
-
"<div class='notify-icon bg-success'><i class='icon-notebook'></i></div>" +
-
"<p class='notify-details'>" + message.content +
-
"<small class='text-muted'>" + message.createTime +
"</small>" +
-
"</p>" +
-
"</a>";
-
$(timeItems[
0]).before(newFirst);
-
$(timeItems[timeItems.length -
1]).remove();
-
}
-
$(
"#alarmNotice").removeAttr(
"hidden")
-
}
5.2 服务端：
-
package net.microlinktech.plant.web.servlet;
-
-
import org.apache.log4j.Logger;
-
-
import javax.websocket.*;
-
import javax.websocket.server.ServerEndpoint;
-
import java.util.concurrent.CopyOnWriteArraySet;
-
-
-
@ServerEndpoint(
"/servlet/PushMessage")
-
public
class PushWebSocketServlet {
-
-
private
static Logger logger = Logger.getLogger(PushWebSocketServlet.class);
-
-
// 静态变量，用来记录当前在线连接数。
-
private
static
volatile
int onlineCount =
0;
-
-
// concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
-
private
static CopyOnWriteArraySet<PushWebSocketServlet> webSocketSet =
new CopyOnWriteArraySet<>();
-
-
// 与某个客户端的连接会话，需要通过它来给客户端发送数据
-
private Session session;
-
-
/**
-
* 连接建立成功调用的方法
-
*
-
* @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
-
*/
-
@OnOpen
-
public void onOpen(Session session) {
-
this.session = session;
-
webSocketSet.add(
this);
//加入set中
-
addOnlineCount();
//在线数加1
-
logger.info(
"有新连接加入！当前在线客户端为" + getOnlineCount());
-
}
-
-
/**
-
* 连接关闭调用的方法
-
*/
-
@OnClose
-
public void onClose() {
-
webSocketSet.remove(
this);
//从set中删除
-
subOnlineCount();
//在线数减1
-
-
logger.info(
"有一连接关闭！当前在线客户端为" + getOnlineCount());
-
}
-
-
@OnMessage
-
public void onMessage (String txt, Session session) {
-
System.out.println(
"onMessage: " + txt.toUpperCase());
-
}
-
-
/**
-
* 发生错误时调用
-
*
-
* @param session
-
* @param error
-
*/
-
@OnError
-
public void onError(Session session, Throwable error) {
-
logger.error(
"发生错误", error);
-
}
-
-
/**
-
* 发送消息到客户端
-
*
-
* @param message
-
*/
-
public void sendMessage(String message) {
-
// this.session.getBasicRemote().sendText(message);
-
this.session.getAsyncRemote().sendText(message);
-
}
-
-
/**
-
* 群发消息
-
*
-
* @param message
-
*/
-
public static void pushMessage(String message) {
-
for (PushWebSocketServlet item : webSocketSet) {
-
item.sendMessage(message);
-
}
-
}
-
-
public static synchronized int getOnlineCount() {
-
return onlineCount;
-
}
-
-
public static synchronized void addOnlineCount() {
-
onlineCount++;
-
}
-
-
public static synchronized void subOnlineCount() {
-
onlineCount--;
-
}
-
}
5.3 需要加入的jar包
javax.websocket:javax.websocket-api:1.1
6、注意点
有些浏览器客户端不支持websocket技术，Web Sockets 目前在各个浏览器到终端支持性并不好， 只有IE 10+， FF 34+， Chrome 31+， Safari 7.1+， Android Browser 4.4+ 才得到支持。详情见这里
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
