js websocket同步等待_朋友们,html websocket是同步的吗?如何实现异步
发布日期:2021-10-30 18:55:42 浏览次数:4 分类:技术文章

本文共 3623 字,大约阅读时间需要 12 分钟。

展开全部

WebSocket protocol 是HTML5一种新的协议(protocol)。它是实32313133353236313431303231363533e59b9ee7ad9431333363373232现了浏览器与服务器全双工通信(full-duplex)。

现在,很多网站为了实现即时通讯(real-time),所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request),然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽。

而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信,但依然需要发出请求(reuqest)。

在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即使服务带来了两大好处:

1. Header

互相沟通的Header是很小的-大概只有 2 Bytes

2. Server Push

服务器可以主动传送数据给客户端

下面实现一个简单PUSH例子如下:

服务端代码:

public class InitServlet extends HttpServlet {

/**

*

*/

private static final long serialVersionUID = 1L;

private static List socketList;

public void init(ServletConfig config) throws ServletException {

InitServlet.socketList = new ArrayList();

super.init(config);

System.out.println("Server start============");

}

public static List getSocketList() {

return InitServlet.socketList;

}

}

public class TestWebSocketServlet extends WebSocketServlet{

private static final Logger log = Logger.getLogger(TestWebSocketServlet.class);

/**

*

*/

private static final long serialVersionUID = 1L;

//存储链接的容器

private static List connsList = new ArrayList();

@Override

protected StreamInbound createWebSocketInbound(String subProtocol,HttpServletRequest request) {

// TODO Auto-generated method stub

return new WebSocketMessageInbound();

}

public class WebSocketMessageInbound extends MessageInbound{

@Override

protected void onClose(int status) {

// InitServlet.getSocketList().remove(this);

super.onClose(status);

log.debug("onClose");

InitServlet.getSocketList().remove(this);

}

@Override

protected void onOpen(WsOutbound outbound) {

log.debug("onOpen");

super.onOpen(outbound);

InitServlet.getSocketList().add(this);

}

@Override

protected void onBinaryMessage(ByteBuffer message) throws IOException {

// TODO Auto-generated method stub

log.debug("onBinaryMessage");

}

@Override

protected void onTextMessage(CharBuffer message) throws IOException {

// TODO Auto-generated method stub

log.debug("onTextMessage="+message);

// this.getWsOutbound().writeTextMessage(CharBuffer.wrap("===="));

// this.getWsOutbound().writeTextMessage(message);

//发送给所有链接的

for (MessageInbound messageInbound : InitServlet.getSocketList()) {

CharBuffer buffer = CharBuffer.wrap(message);

WsOutbound outbound = messageInbound.getWsOutbound();

outbound.writeTextMessage(buffer);

outbound.flush();

}

}

}

}

web.xml配置

initServlet

com.demo.websocket.InitServlet

1

websocket

com.demo.websocket.TestWebSocketServlet

websocket

/websocket

前台代码:

WebSoket Demo

//验证浏览器是否支持WebSocket协议

if (!window.WebSocket) {

alert("WebSocket not supported by this browser!");

}

var ws;

function display() {

//var valueLabel = document.getElementById("valueLabel");

//valueLabel.innerHTML = "";

ws=new WebSocket("ws://localhost:8082/springmvc/websocket");

//监听消息

ws.onmessage = function(event) {

//valueLabel.innerHTML+ = event.data;

log(event.data);

};

// 打开WebSocket

ws.onclose = function(event) {

//WebSocket Status:: Socket Closed

};

// 打开WebSocket

ws.onopen = function(event) {

//WebSocket Status:: Socket Open

发送一个初始化消息

ws.send("Hello, Server!");

};

ws.onerror =function(event){

//WebSocket Status:: Error was reported

};

}

var log = function(s) {

if (document.readyState !== "complete") {

log.buffer.push(s);

} else {

document.getElementById("contentId").innerHTML += (s + "\n");

}

}

function sendMsg(){

var msg=document.getElementById("messageId");

//alert(msg.value);

ws.send(msg.value);

}

Send

< /html>

已赞过

已踩过<

你对这个回答的评价是?

评论

收起

转载地址:https://blog.csdn.net/weixin_39849239/article/details/111808796 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:git 撤销刚才的rebase_git rebase 的使用 (用于撤销某次commit)
下一篇:valuable的用法_valuable是什么意思_valuable怎么读_valuable翻译_用法_发音_词组_同反义词_贵重的_宝贵的-新东方在线英语词典...

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年04月17日 06时01分40秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

程序通过技术赚钱的八个途径 2019-04-26
我在爬坡阶段 2019-04-26
大疆机甲大师教育机器人Python开发:中文命名变量初尝试 2019-04-26
大疆机甲大师教育机器人Python开发:API中文化初尝试 2019-04-26
大疆机甲大师Python开发: 两只老虎 2019-04-26
大疆机甲大师教育机器人Python API中文化之一:枪亮枪暗 2019-04-26
大疆机甲大师教育机器人Python API中文化之二:LED闪烁 2019-04-26
大疆 RoboMaster 机甲大师官方刚刚开通”机甲小 S 实验室”知乎专栏 2019-04-26
大疆机甲大师教育机器人Python API中文化之三:底盘灯效 2019-04-26
大疆机甲大师教育机器人Python API中文化之四五:云台灯效,指定序号 2019-04-26
大疆机甲大师教育机器人Python API中文化之六:关灯 2019-04-26
“中文编程”知乎专栏两岁了——山雨欲来风满楼 2019-04-26
大疆机甲大师Python API之七:做个闹钟 2019-04-26
【意外走向】大疆机甲大师Python API之八:计时——为性能测试展开1000次循环 2019-04-26
RFC#2457——Rust 语言支持非 ASCII 码标识符在 GitHub 引发的激辩(一) 2019-04-26
RFC#2457——Rust 语言选择支持非 ASCII 码标识符在 GitHub 引发的激辩(二) 2019-04-26
”为什么有这么多人执着于中文编程?”回答两千赞留念及回应 2019-04-26
【家务】盘点小孩玩具零件缺失情况 2019-04-26
开发中文 API 的一些策略 2019-04-26
从日本编程书籍《我的第一本编程书》中译版看中文例程如何扬长避短——标识符(一) 2019-04-26