websocket

最新推荐文章于 2024-04-12 09:18:19 发布

北巷小哥驾到

最新推荐文章于 2024-04-12 09:18:19 发布

阅读量269

点赞数

分类专栏： websocket 文章标签： websocket 双向通信前端

本文链接：https://blog.csdn.net/qq_28501497/article/details/90713142

版权

websocket 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近消失了一段时间，一直在做websocket的研究，不扯淡，直接分享吧，

一、简介

websocket是tcp协议上建立的一个可以进行双向通讯的协议，他的唯一主要作用就是客服端和服务端都可以作为主角调取另一方，就是可以进行双向通信，但是在可以双向通信之前，必须得进行一次请求，才能建立起通信，也就是说还得浏览器先发起一次请求，然后才能开始进行通信，http协议是不能进行双向通信的，之前像我们做聊天软件或者是直播团软件，都是通过ajax的定时请求，还有一个我也不清楚的Comet长轮讯，不断得发起http请求，这样的话对于宽带流量的需求就会增大，服务器的压力也会变大，所以websocket是开发双向通信软件的必然趋势

在这里插入图片描述
上面这是传统的http请求和websockets请求示意图，第一个ajax的http请求，由client(客户端)发起http请求，请求server(服务器)
，然后服务做出响应返回数据，连接断开，下次要通信的话client必须再一次进行请求，server才能做出反应

websockets 第一次发起http请求也就是握手，下一次websocket在发起请求，服务器给咱们客户端返回两次，后端可以直接调取客户端，这个图是我从网上扣下来的，因为他们都是基于tcp协议，在咱们使用websocket的时候，都是基于http请求，只不过是协议不同而已，websocket的请求协议如下：

GET ws://localhost:3000/ws/chat HTTP/1.1 Host: localhost Upgrade: websocket Connection: Upgrade Origin: http://localhost:3000 Sec-WebSocket-Key: client-random-string Sec-WebSocket-Version: 13 请求的地址是以ws wss开头，类似于http https, 请求头的Upgrade: websocket 和Connection: Upgrade告诉服务器和浏览器这是一个http协议的升级版本websocket协议，你的连接方式必须按这个协议来走 Sec-WebSocket-Key: client-random-string用来表示这个连接，并不是加密 Sec-WebSocket-Version: 13 websocket的版

返回格式 HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: server-random-string
101表示该http的协议被更改，更改之后的是Upgrade: websocket
浏览器和服务器握手一次后，就建立了连接你就可以通信了

二、浏览器## 标题
很显然，要支持WebSocket通信，浏览器得支持这个协议，这样才能发出ws://xxx的请求。目前，支持WebSocket的主流浏览器如下：

• Chrome
• Firefox
• IE >= 10
• Sarafi >= 6
• Android >= 4.4
• iOS >= 8

三、服务器## 标题

由于WebSocket是一个协议，服务器具体怎么实现，取决于所用编程语言和框架本身。Node.js本身支持的协议包括TCP协议和HTTP协议，要支持WebSocket协议，需要对Node.js提供的HTTPServer做额外的开发。已经有若干基于Node.js的稳定可靠的WebSocket实现，我们直接用npm安装使用即可。
Npm I ws

四、前端代码

var socket=new WebSocket(url)  //创建websocket对象
    socket.onopen=function(){    //打开连接，创建与服务的通信
}
socket.onmessage=function(data){  //服务返回的数据
}
socket.onerror=function(){   //通信发生错误
}
socket.onclose=function(){  //连接关闭时触发
}
  socket.send()  //主动给服务器发送数据
socket.close()   //关闭连接

五、后端代码

var WebSocketServer = require('ws').Server;//引入websocket
//开启服务9088端口
var wss = new WebSocketServer({
  port: 9088
});

//连接通信调用
wss.on('connection', function connection(ws, req) {
//前端请求send调用事件
	ws.on('message', function incoming(message) {
//message 前端请求参数
    	wss.clients.forEach((client) => {
     	 client.send(message)
   		 })
  });

})

六、gitHub地址 https://github.com/gitbin123/websocket.git
里面有多个服务直接 node 文件夹.js 每次只能起一个啊

在这里插入图片描述