web socket 即时通讯 详细讲解

最新推荐文章于 2024-08-20 11:13:59 发布
最新推荐文章于 2024-08-20 11:13:59 发布
阅读量740 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41930665/article/details/80838330
版权
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过  send()  方法来向服务器发送数据，并通过  onmessage  事件来接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocal] );
以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
WebSocket 属性
以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：
属性
描述
Socket.readyState
只读属性  readyState  表示连接状态，可以是以下值：
0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount
只读属性  bufferedAmount  已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
WebSocket 事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：
事件
事件处理程序
描述
open
Socket.onopen
连接建立时触发
message
Socket.onmessage
客户端接收服务端数据时触发
error
Socket.onerror
通信发生错误时触发
close
Socket.onclose
连接关闭时触发
WebSocket 方法
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：
方法
描述
Socket.send()
使用连接发送数据
Socket.close()
关闭连接
WebSocket 实例
WebSocket 协议本质上是一个基于 TCP 的协议。

为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

直接上代码


客户端操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>websocket</title>
<style>
#list{
width : 200px;
height : 500px;
border : 1px solid #880000;
}
</style>
</head>
<body>
<input id="input" type="text"/>
<input id="btn" type="button"/>
<ul id="list"></ul>
</body>
<script>
//语法、 连接到服务器
var ws =new WebSocket ("ws://localhost:8000");
//连接建立时触发
ws .onopen=function( event ){
console .log('客户端已连接');
}
// 数据
function send(){
var text = document .querySelector("#input");
var datas = text . value ;
ws .send( datas );
}
//接收到消息时触发
ws .onmessage=function( event ){
var ul = document .querySelector("#list");
var li = document .createElement("li");
li .innerText = event .data;
ul .appendChild( li );
}
// 点击发送数据
var btn = document .querySelector("#btn");
btn .οnclick=function(){
send();
}
</script>


客户端操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>websocket</title>
<style>
#list{
width : 200px;
height : 500px;
border : 1px solid #880000;
}
</style>
</head>
<body>
<input id="input" type="text"/>
<input id="btn" type="button"/>
<ul id="list"></ul>
</body>
<script>
//语法、 连接到服务器
var ws =new WebSocket ("ws://localhost:8000");
//连接建立时触发
ws .onopen=function( event ){
console .log('客户端已连接');
}
// 数据
function send(){
var text = document .querySelector("#input");
var datas = text . value ;
ws .send( datas );
}
//接收到消息时触发
ws .onmessage=function( event ){
var ul = document .querySelector("#list");
var li = document .createElement("li");
li .innerText = event .data;
ul .appendChild( li );
}
// 点击发送数据
var btn = document .querySelector("#btn");
btn .οnclick=function(){
send();
}
</script>

温柔一刀Trend
关注
vue项目中使用webSocket
m0_57997374的博客
09-15 802
项目全局封装webSocket // 引入webScoket包 import SockJs from 'sockjs-client' // 创建一个socket类并抛出 export default class Socket { constructor (param = {}) { this.param = param this.reconnectCount = 0 this.socket = null this.taskRemindInterval = null
使用nodeJs+web Socket构建即时通讯（WebIM）
忆浅曦
09-07 1万+
在文章的开头，我要解释一下，为什么不直接使用web Socket实现即时通讯，因为一部分浏览器并不兼容web Socket，导致即时通讯在这些浏览器上无法正常使用，所以才需要用到nodeJs里封装好webSocket协议的socket.io包模块来提供不兼容websocket浏览器的解决方案并接管客户与服务器端交互的IO流。（一般处理不兼容websocket的浏览器的方法就是考虑 commit 方式
css总结20:TCP通信协议WebSocket
anjiye7641的博客
04-02 196
HTML5 WebSocket 1 介绍: WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，...
H5+CSS+JS实现 webSocket 即时通讯（2）
Yann
06-18 1328
上一篇中已经讲明如何建立webSocket服务，这一篇将继续完善web端的相关代码，利用webSocket实现即时通讯，话不多说，上代码 1：目录结构，如下图所示
纯php+txt实现即时通讯
最新发布
相对技术
08-20 332
3个文件 一个index.html 一个 post.php一个get.php。这里有问题就是，post和get会频繁读写，不知道对服务器性能有和影响。同样的这个方法还可以改成一对一视频聊天，视频必须ssl，文字聊天不用。双方在聊天之前，需要一方先设置，加密和解密密码【为同一个密码】单纯的php就不需要服务器再安装什么其他软件了，优点就是这个。index把用户输入的内容通过js加密，发给post。另一方，再填写房间号和密码，就可以实现一对一聊天了，post生成房间号，也就是文件名，再设置房间号【文件名】
iOS上的CSS样式协议 VKCssProtocol
weixin_34409703的博客
12-13 375
迁移一批老文章到掘金 CSS产生的想法 早先，写过一阵子RN，前一阵子写微信小程序，深深地觉得CSS这个东西写起来很爽，样式与界面完全隔离，写好一套一套的样式CSS Class然后，在写界面HTML的时候直接对界面元素，无论是什么HTML标签，什么控件，只要指定CSS Class的名字就能自动生效。 样式和界面完全隔离解耦 样式之间可以自由任意排列组合创建新CSS Class 对任意界面元素指定...
基于WebSocket的网页端即时通讯
热门推荐
AaronHao的博客
11-20 1万+
基于WebSocket的网页端即时通讯最近项目中需要用到一些即时通讯的相关技术，查阅了一些资料后发现有些示例不是让人很满意，所以博主写了一个demo，就怕以后会忘掉，也方便博友查看。由于博主用的是SSM（springMVC+spring+MyBatis）框架，所以肯定要首选spring自带的WebSocket了。
Web端即时通讯技术：WebSocket、socket.io、SSE
蔚可云的博客
08-04 670
Extension data： x位，如果客户端与服务端之间没有特殊约定，那么扩展数据的长度始终为0，任何的扩展都必须指定扩展数据的长度，或者长度的计算方式，以及在握手时如何确定正确的握手方式。Sec-WebSocket-Key主要目的并不是确保数据的安全性，因为Sec-WebSocket-Key、Sec-WebSocket-Accept的转换计算公式是公开的，而且非常简单，最主要的作用是预防一些常见的意外情况（非故意的）。WebSocket协议中，数据掩码的作用是增强协议的安全性。...
即时通讯源码php开源版下载附安装教程+演示
仿站、源码搭建/迁移技术博客
04-20 3537
1、引言 有关Web端即时通讯技术的文章我已整理过很多篇，阅读过的读者可能都很熟悉，早期的Web端即时通讯方案，受限于Web客户端的技术限制，想实现真正的“即时”通信，难度相当大。 传统的Web端即时通讯技术从短轮询到长连询，再到Comet技术，在如此原始的HTML标准之下，为了实现所谓的“即时”通信，技术上可谓绞尽脑汁，极尽所能。 自从HTML5标准发布之后，WebSocket这类技术横空出世，实现Web端即时通讯技术的便利性大大提前，以往想都不敢想......
如何用WebSocket打造Web端IM即时通讯聊天
蔚可云的博客
08-08 1111
这一点，是很大的不同的，等会看到具体的消息类，感受会更明显。因为 WebSocket 协议，不像 HTTP 协议有 URI 可以区分不同的 API 请求操作，所以我们需要在 WebSocket 的 Message 里，增加能够标识消息类型，这里我们采用 type 字段。如果仅仅是仅仅提供 WebSocket 协议的支持，可以考虑采用方案一或者方案二，在使用上，两个方案是比较接近的。继续基于上述创建的三个浏览器，我们先点击「清空消息」按钮，清空下消息，打扫下上次测试展示出来的接收得到的 Message。...
青柚仿微信H5聊天系统即时通讯社交完整优化版，带安卓苹果端APP源码+视频教程.zip
08-11
3. **Web Socket**：实现实时通信，保证消息的即时性。 4. **前端框架**：可能采用了Vue.js、React.js等现代前端框架，简化开发流程。 5. **API集成**：与后端服务器通过RESTful API进行数据交互。 三、安卓和苹果...
http与css的简要介绍
bailantangpin的博客
12-22 427
HTTP（超文本传输协议）是一种用于在Web浏览器和Web服务器之间进行通信的协议。它是互联网上最常用的协议之一，负责传输和交换超文本（如HTML、CSS、JavaScript等）以及其他资源。在本文中，我们将详细介绍HTTP的各个方面。请求与响应 HTTP通信是基于请求-响应模型的。客户端发送HTTP请求到服务器，服务器根据请求返回HTTP响应。请求包括方法（如GET、POST、PUT等）、URL、报头和可选的请求体，而响应包括状态码、报头和响应体。
WebSocket
米老头
06-19 424
1.WebSocket 的特点 http协议只能有客户端发起，状态需要等到服务器返回才能操作。WebSocket可以数据双向发送，服务器端和客户端可以同时向对方发送数据。 （1）建立在 TCP 协议之上，服务器端的实现比较容易。 （2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。 （
通过Web-Socket实现客户端和服务器端的数据交互
weixin_34099526的博客
04-03 754
web-socket优势：1）、持续数据连接 2）、全双工作方式 3）、2byte的通信：1byte定义开始、1byte定义字长客户端：发送协议 ——ws://普通web-socket ——wss:://加密web-socket创立连接： var ws,curre...
Web即时通信技术 -- Web Socket
码农的历程
12-01 3761
WebSocket 是一种网络传输协议，可在单个 TCP 连接上进行全双工通信，位于 OSI 模型的应用层。WebSocket 协议在 2011 年由 IETF 标准化为RFC 6455，后由RFC 7936补充规范。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。 优点 在客户端和服务器之间保有一个持有的连接，两边可以...
http协议与css
qq_52783355的博客
07-19 510
HTTP协议与css
有了 HTTP 协议，为什么还需要 Websocket？
Monsterof的博客
10-18 3964
WebSocket 是一种基于 TCP 连接上进行全双工通信的协议，相对于 HTTP 这种非持久的协议来说，WebSocket 是一个持久化网络通信的协议。 WebSocket 是一种基于 TCP 连接上进行全双工通信的协议，相对于 HTTP 这种非持久的协议来说，WebSocket 是一个持久化网络通信的协议。 它不仅可以实现客户端请求服务器，同时可以允许服务端主动向客户端推送数据。在 WebSocket API 中，客户端和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传
c语言 tcp全双工通信,(传输层)TCP协议
weixin_28773055的博客
05-25 2647
目录首部格式图释:各个段位说明:源端口和目的端口:　　各占 2 字节.端口是传输层与应用层的服务接口.传输层的复用和分用功能都要通过端口才能实现序号:　　占 4 字节.TCP 连接中传送的数据流中的每一个字节都编上一个序号.序号字段的值则指的是本报文段所发送的数据的第一个字节的序号确认号:　　占 4 字节,是期望收到对方的下一个报文段的数据的第一个字节的序号数据偏移/首部长度:　　占 4 位,它指...
Socket.IO实时Web应用开发指南
该书详细介绍了如何通过Socket.IO技术创建具有实时功能的Web应用，涵盖了从基础概念到高级实践的全面教程。书中内容可能包括以下关键知识点： 1. **Socket.IO简介**：首先，读者将了解Socket.IO的核心原理，即如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值