WebSocket 入门 第一课（学习笔记）

最新推荐文章于 2020-04-16 11:39:43 发布
最新推荐文章于 2020-04-16 11:39:43 发布
阅读量700 收藏 1
点赞数 1
文章标签： 学习笔记 websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Annnaer/article/details/85856340
版权

websocket:

官网：http://www.websocket.org/

 

websocket其实就是：

Web端的socket,server和client可以相互发送消息想，本质就是TCP的连接；

也就是说：H5 websocket定义了一个API接口，让web页面通过websocket协议与远程主机直接连接。这样的好处就是HTML5 WebSockets大大减少了不必要的网络流量和延迟。

官网解释是：

HTML5 WebSockets规范定义了一个API，使Web页面能够使用WebSockets协议与远程主机进行双向通信。它引入了WebSocket接口并定义了一个全双工通信通道，该通道通过Web上的单个插槽进行操作。与通过维护两个连接来模拟全双工连接的不可扩展的轮询和长轮询解决方案相比，HTML5 WebSockets大大减少了不必要的网络流量和延迟。

 

HTML5 WebSockets解决了代理和防火墙等网络危害，可以通过任何连接实现流式传输，并且能够通过单一连接支持上游和下游通信，基于HTML5 WebSockets的应用程序减轻了服务器负担，允许现有机器支持更多并发连接。下图显示了基于WebSocket的基本体系结构，其中浏览器使用WebSocket连接进行全双工，与远程主机直接通信。

 

WebSockets提供的一个更独特的功能是它能够遍历防火墙和代理，这是许多应用程序的问题区域。Comet风格的应用程序通常采用长轮询作为防火墙和代理的基本防线。该技术是有效的，但不适合具有低于500毫秒延迟或高吞吐量要求的应用。基于插件的技术（如Adobe Flash）也提供了一定程度的套接字支持，但长期以来一直承受着WebSockets现在解决的代理和防火墙遍历问题。

 

WebSocket协议

WebSocket协议旨在与现有的Web基础结构良好协作。作为此设计原则的一部分，协议规范定义WebSocket连接作为HTTP连接开始其生命周期，保证与WebSocket前世界的完全向后兼容性。从HTTP到WebSocket的协议切换称为WebSocket握手。

 

 

删除看不懂的，以上就是我理解的！！！

 

websocket的使用：

 

1、想要连接远程服务器，需要一个新的websocket实例，并且需要为websocket提供一个URL，这个URL表示的就是希望连接的端点。所以说第一步建立全新的websocket，并连接远程端点；

 

var myWebSocket = new WebSocket（“ws：//www.websockets.org”）;

 

websocket括号里面的就是连接远程端点的URL，注意，这里的URL前缀不再是HTTP协议，而是 ‘ws://’ 表示的是websocket协议，当然还有一种安全websocket协议的前缀 ‘wss://’ ,只有这两种。

2、创建之后记得打开，不然没法用；使用打开 WebSocket 的方法：' onopen '，开了就得关闭，方法为：' onclose '。具体如下：

myWebSocket.onopen = function（evt）{alert（“Connection open ...”）; };

myWebSocket.onclose = function（evt）{alert（“Connection closed。”）; };

 

 

3、在打开与关闭websocket之间就是我们对websocket的操作，接受和发送我们想要远程端点得到的信息。发送：‘ send ’, 接受：‘onmessage’；具体如下：

myWebSocket.onmessage = function（evt）{alert（“收到消息：”+ evt.data）; };

myWebSocket.send（“Hello WebSockets！”）;

 

 

以上便可以简单实现web页面通过websocket（websocket协议）与远程端点（远程主机）实现简单的连接功能。

 

小例子如下：

功能介绍：页面中有一个输入框，发送按钮与div元素。将输入框中的信息通过websocket发送信息展示在div元素中。

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>简单小例子</title>

</head>

<body>

<input type="text" id="inMessage"><button id="sendMessage">发送</button>

<div id="showText"></div>

<script>

var liwebsocket = new WebSocket("ws://echo.websocket.org/");

liwebsocket.onopen = function () {

console.log("websocket is open")

// 当打开websocket是，使div的暂未websocket is open

document.getElementById("showText").innerHTML = "websocket is open!!!";

}

// 打开之后先接受一下输入框中的信息 并展示在 div中

liwebsocket.onmessage = function (e) {

document.getElementById("showText").innerHTML = e.data;

}

// 向websocket发送输入框信息

document.getElementById("sendMessage").onclick = function () {

//先获取发送的内容

var textValue = document.getElementById("inMessage").value;

// 发送

liwebsocket.send(textValue);

}

// 最后不要忘记关闭

liwebsocket.onclose = function () {

console.log("websocket is close!!!!");

}

</script>

</body>

</html>

 

 

 

 

 

 

 

 

Annnaer
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Django中WebSocket的实现与性能优化策略
mrdeam的博客
07-08 572
WebSocket是一种在单个TCP连接上进行全双工通信的协议。与HTTP不同，WebSocket允许服务器主动向客户端发送消息，而不需要客户端首先发起请求。这使得它成为实时应用程序的理想选择。本文介绍了在Django中实现WebSocket的两种方法：一种是使用第三方库，另一种是使用官方支持的异步通信框架Django Channels。通过WebSocket技术，我们可以在Web应用中实现实时通信，例如聊天应用、实时更新等功能。在使用。
WebSocket 入门
最新发布
04-02
WebSocket 入门
spring+springMVC+WebSocket 的学习笔记
10-15
spring+springMVC+WebSocket 的学习笔记 ,超详细，源代码注释清晰，适合新手，赶紧下载吧，提高技术，面试升职加薪需要不断学习
websocket易语言源码和例子
05-27
websocket易语言源码和例子。1)对 AnsiToUtf8 函数添加截除最后 两个字节{0,0}功能,可以正确调试JOSN。2)对 client_检查握手信息 。    当 get.status ="" 的时候不做检测。    当 get.Connection 包含 upgrade 的时候 检测通过。2)对 server_创建握手包信息 。    当 get.Connection 包含 upgrade 的时候 检测通过。@汇编代码。
WebSocket学习笔记（一）
weixin_41837346的博客
04-16 123
目录1. 概述2. WebSocket 协议3. 使用参考链接 1. 概述 本质：HTML5新增协议 目的：在浏览器和服务器间，建立一个不受限的双向通信通道 传统HTTP协议：请求 - 响应协议（服务器无法主动发送消息） 应用：实时聊天，多人游戏（数据实时同步） HTTP轮询（Comet）问题：实时性不够，请求频繁 2. WebSocket 协议 浏览器请求 GET ws://localh...
WebSocket学习笔记
qq_36721836的博客
05-17 157
maven导入jar包： <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.3.0</version> </...
WebSocket入门实战工程
01-27
WebSocket是Web通信协议的一种，它为双向通信提供了全双工的通道，这意味着服务器和客户端都可以在任意时刻主动发送数据，而无需等待对方的响应。WebSocket协议的出现弥补了HTTP协议在实时性上的不足，尤其适合于...
websocket入门demo
06-19
通过学习和实践这个"websocket入门demo"，你可以了解到WebSocket的基本操作，以及如何在实际项目中集成WebSocket以实现实时通信功能。对于深入理解WebSocket的工作机制和应用，还需要了解更多的网络协议知识，以及...
WebSocket入门
06-12
WebSocket是一种在客户端和服务器之间建立持久连接的网络通信协议，它是HTML5标准的一部分，用于解决传统的HTTP协议在实时通信上的不足。WebSocket允许双向通信，即服务器和客户端都可以主动发送数据，而无需等待...
易语言-websocket解析易语言
06-26
关于完成帧、操作码、掩码等请自行翻资料，一般只看转换后的数据就够了。如果操作码不等于2，可以对结果进行utf8解码得到文本数据。
易语言-websocket易语言源码和例子
06-25
websocket易语言源码和例子 1)对 AnsiToUtf8 函数添加截除最后 两个字节{0,0}功能,可以正确调试JOSN。 2)对 client_检查握手信息 当 get.status ="" 的时候不做检测 当 get.Connection 包含 upgrade 的时候 检测通过 2)对 server_创建握手包信息 当 get.Connection 包含 upgrade 的时候 检测通过
易语言-WebSocket模块+例程
06-25
最大支持6万条连接。底层是HP - socket，支持ws/wss。内部有自动的心跳（服务器发送ping，客户端自动回复pong）。 1、把HPSocket4C.dll文件放在：C:\Program Files (x86)，目录下。然后就可以使用了。 2、如果要修改HPSocket4C.dll文件位置，修改HP_Socket这个源码就行了。
web服务器易语言语言
01-01
是不是想有个自己的web服务器呢,下载吧,有了就可以有自己的网站了
易语言websocket服务器
07-20
易语言websocket服务器源码,websocket服务器,握手包处理,生成握手参数列,创建返回握手包,返回数据包处理,接收数据包解码,高级截取文本,取sha1,切片,ord,字节集到十六进制,十六进制到字节集,取十进制,取数值,utf8到gbk,gbk到utf8,工具_编码转换,取Unix时间戳,
websocket 的入门学习资料
12-27
在这个入门学习资料中，我们将重点探讨WebSocket的基本概念、如何使用PHP搭建WebSocket服务器以及JavaScript（JS）在前端如何与WebSocket交互。 WebSocket协议基于HTTP，但在握手之后，它就不再依赖HTTP，而是建立...
spring-boot-starter-websocket入门demo
06-13
好的，下面是一个简单的 Spring Boot WebSocket 入门 demo： 1. 首先，在 pom.xml 文件中引入 `spring-boot-starter-websocket` 依赖： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 2. 创建一个简单的 WebSocket 处理器： ```java @Component public class WebSocketHandler extends TextWebSocketHandler { private final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { sessions.add(session); session.sendMessage(new TextMessage("连接成功！")); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { for (WebSocketSession webSocketSession : sessions) { webSocketSession.sendMessage(new TextMessage("客户端说：" + message.getPayload())); } } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { sessions.remove(session); } } ``` 3. 创建 WebSocket 配置类： ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Autowired private WebSocketHandler webSocketHandler; @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(webSocketHandler, "/ws").setAllowedOrigins("*"); } } ``` 4. 编写一个简单的页面来测试 WebSocket： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebSocket</title> </head> <body> <h1>WebSocket Demo</h1> <div> <input type="text" id="input"/> <button onclick="send()">发送</button> </div> <div id="output"></div> <script> var socket = new WebSocket("ws://localhost:8080/ws"); socket.onmessage = function(event) { var output = document.getElementById("output"); output.innerHTML += "<p>" + event.data + "</p>"; }; function send() { var input = document.getElementById("input"); socket.send(input.value); input.value = ""; } </script> </body> </html> ``` 5. 运行程序，访问 http://localhost:8080/index.html，打开浏览器控制台，输入命令 `socket.send("Hello, WebSocket!")`，即可看到页面上显示出 "客户端说：Hello, WebSocket!"。 希望这个 demo 能帮助到你。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值