目录
1.什么是websocket?
2.为什么用websocket?
3.怎么用websocket?
4.websocket基于浏览器相关?
4.1支持的浏览器
4.2查看浏览器是否支持websocket
4.3 F12里面的网络信息(Network)
4.4 建立连接测试
4.4.1建立连接失败(无参)
4.4.2 建立连接失败(带参)
4.4.3 建立连接成功
4.4.4 建立连接成功后断开连接
5.websocket的请求头以及响应
6.websocket 基于h5客户端使用的简单例子
注:博客整理不易,转载注明出处。
1.什么是websocket?
解释1:来源于菜鸟教程
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
解释2:来源于博客https://blog.csdn/weixin_40784198/article/details/81811039
Websocket是存在于互联网交互架构应用层的协议,虽然在实际的运用场景中websocket需要http去启动链接,但该依赖关系不是必要的。Websocket连接完全可以独立于http,之所以将连接方式建立在http之上是因为http已经提供了便捷的沟通协议。利用http的协议完成wesocket握手连接可以节省开发独立握手协议的成本。
注:简单的说websocket是一种协议,类似http协议这种。
2.为什么用websocket?
现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
http请求要想实时获取服务端的数据就只能不停的发请求去问服务端,只有客户端发起请求后服务端才能响应请求,这样非常浪费资源;而websocket协议,只要建立连接后服务端和客户端就可以随时互相发送消息,不需要客户端频繁的去发起请求。
注:简单的说,就是http协议不支持长连接,而websocket支持长连接。
3.怎么用websocket?
参考菜鸟教程:HTML5 WebSocket | 菜鸟教程
截图如下:
4.websocket基于浏览器相关?
4.1支持的浏览器
目前大部分浏览器支持 WebSocket() 接口,你可以在以下浏览器中尝试实例: Chrome, Mozilla, Opera 和 Safari。
4.2查看浏览器是否支持websocket
通过如下两种方式可以验证浏览器是否支持websocket:
//方式一
if ("WebSocket" in window){
//支持websocket
}
//方式二
if (window.WebSocket) {
//支持websocket
}
4.3 F12里面的网络信息(Network)
F12(鼠标右键-->检查)信息如下
点击Network(网络请求相关的信息)这一个选项卡:
以上对应的解释如下:
name:发起请求的名称(如上,请求名称是ws)
status:101代表websocket连接成功,其他代表连接失败
type:连接类型,websocket代表websocket请求;xhr代表ajax请求
initiator:代表发起者,也就是调用请求的代码所在的位置
time:请求的响应时间
4.4 建立连接测试
4.4.1建立连接失败(无参)
如下,name是ws,此时是没有带请求参数的:
4.4.2 建立连接失败(带参)
如下,name为ws?token=...,这个是因为该请求带了参数,这些参数用于服务端校验:
4.4.3 建立连接成功
4.4.4 建立连接成功后断开连接
5.websocket的请求头以及响应
如下,和http的请求头很类似的,因为websocket本身就是通过http协议去发送,只是附带了一些特殊头而已
如上请求头的解释:
- Connection: Upgrade:表示要升级协议
- Upgrade: websocket:表示要升级到 websocket 协议。
- Sec-WebSocket-Version: 13:表示 websocket 的版本。如果服务端不支持该版本,需要返回一个
Sec-WebSocket-Versionheader
,里面包含服务端支持的版本号。 - Sec-WebSocket-Key:与后面服务端响应首部的
Sec-WebSocket-Accept
是配套的,提供基本的防护,比如恶意的连接,或者无意的连接
服务端返回内容如下,状态代码101表示协议切换。到此完成协议升级,后续的数据交互都按照新的协议来。
6.websocket 基于h5客户端使用的简单例子
例1:
来自菜鸟教程,可以根据如下基本代码进行修改封装
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://136.25.60.143:30326/app-im-websocket/ws?token=123&appCode=aiyx&groups=center1");
ws.onopen = function()
{
// Web Socket 已连接上,使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function()
{
// 关闭 websocket
alert("连接已关闭...");
};
}
else
{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>
</body>
</html>
例2:
自己实际项目中测试的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Netty-Websocket</title>
<style>
input {
height: 2em;
margin-bottom: 1em;
}
input[type='text'] {
width: 20em;
}
input[type='button'] {
width: 10em;
}
.message-window{
width: 50%;
}
.message-window input[type='text'],textarea{
width: 100%;
margin-bottom: 1em;
}
.message-window input[type='button']{
background: #9ea5a5;
border: 1px solid #8c9090;
}
</style>
</head>
<body>
<form onSubmit="return false;">
<label>WS:</label>
<br/>
<input type="text" id="wsurl" value="ws://127.0.0.1:30326/app-im-websocket/ws?token=123&appCode=testSystem&groups=center1">
<input type="button" value="建立连接" style="color: red" onclick="createWebSocket()">
<br/>
<div class="message-window">
<label>消息窗口:</label>
<br/>
<textarea id="responseText" rows="10"></textarea>
<br/>
<input type="text" name="message" placeholder="这里输入消息"/>
<br/>
<input type="button" value="发送" onClick="send(this.form.message.value)"/>
</div>
</form>
<script type="text/javascript">
var socket;
if (!window.WebSocket) {
window.WebSocket = window.MozWebSocket;
}
if (!window.WebSocket) {
alert("您的浏览器不支持WebSocket协议!");
}
/**
* 发送消息
*/
function send(message) {
console.log("发送",message);
if (socket.readyState === WebSocket.OPEN) {
console.log("发送",message);
socket.send(message);
} else {
alert("WebSocket连接没有建立!");
}
}
/**
* 创建连接
*/
function createWebSocket (){
var wsurl = document.getElementById('wsurl').value;
console.log(wsurl);
if (socket != null) {
if (socket.readyState === WebSocket.OPEN) {
socket.close();
}
}
if (window.WebSocket) {
console.log("进入1");
socket = new WebSocket(wsurl);
socket.onmessage = function (event) {
console.log("进入2");
// 心跳包监听
if (event.data.length === 6) {
console.log("长度6",event.data);
if (event.data === '0x0000') {
console.log("心跳",event.data);
// 回复心跳
socket.send(event.data);
}
}else{//不是心跳数据才处理
// 数据处理
console.log("接收2",event.data);
var ta = document.getElementById('responseText');
ta.value += event.data + "\r\n";
}
};
socket.onopen = function (event) {
var ta = document.getElementById('responseText');
ta.value = "Netty-WebSocket服务器。。。。。。连接 \r\n";
};
socket.onclose = function (event) {
var ta = document.getElementById('responseText');
ta.value = "Netty-WebSocket服务器。。。。。。关闭 \r\n";
};
} else {
alert("您的浏览器不支持WebSocket协议!");
}
}
</script>
</body>
</html>
参考链接:
HTML5 WebSocket | 菜鸟教程
Websocket是什么?_Uncle_Joe的博客-CSDN博客_什么是websocket
https://segmentfault/a/1190000012948613
......
更多推荐
我对websocket的一些理解
发布评论