一文读懂Websocket

这篇具有很好参考价值的文章主要介绍了一文读懂Websocket。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

系列文章目录

提示：通过本章节的学习，你想深入了解什么是websocket。

前言

提示：这里可以添加本文要记录的大概内容：

例如：websocket是html5新增的全双工通讯协议，基于Tcp协议，属于应用层协议。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Websocket是什么？

WebSocket 是一种在单个 TCP 连接上进行全双工通信的网络协议。它在建立连接之后，客户端和服务器之间可以进行双向数据传输，即服务器可以主动向客户端发送数据，而不需要等待客户端的请求。

二、如何使用Websocket

前端创建流程

具体使用：
在前端，可以使用浏览器提供的 WebSocket API，来创建 WebSocket 连接。在后端，可以使用各种编程语言和框架提供的 WebSocket 库来实现 WebSocket 服务端。

	  1、创建websocket对象
	  const ws = new WebSocket('ws://localhost:8080');
	  2、监听其事件
	  ws.onopen = function(event) {
	  console.log('WebSocket 连接成功！');
	  }
	  ws.onmessage = function(event) {
	  console.log('收到服务器发送的消息：', event.data);
	  }
	  ws.onclose = function(event) {
	  console.log('WebSocket 连接关闭！');
	  }
	  ws.onerror = function(event) {
	  console.log('WebSocket 连接出错！');
	  }

后端创建流程

代码如下（示例）：

使用 Node.js 作为后端，可以使用 ws 模块来实现 WebSocket 服务端。首先需要安装 ws 模块：

安装代码 npm install ws

    然后，在代码中创建 WebSocket 服务器：
    const WebSocket = require('ws');
	const server = new WebSocket.Server({ port: 8080 });
	server.on('connection', function(ws) {
	  console.log('WebSocket 连接成功！');
	  ws.on('message', function(data) {
	  console.log('收到客户端发送的消息：', data);
	  // 向客户端发送消息
	  ws.send('收到消息：' + data);
	});
	ws.on('close', function() {
	  console.log('WebSocket 连接关闭！');
	  });
    });

在上述代码中，WebSocket.Server 创建了 WebSocket 服务器，监听 8080 端口
server.on(‘connection’) 监听客户端连接事件，ws.on(‘message’) 监听客户端发送消息事件，ws.send 向客户端发送消息，ws.on(‘close’) 监听客户端关闭连接事件。

websocket应用场景:

1、即时聊天应用：WebSocket 可以实现客户端和服务器之间的实时双向通信，适用于聊天室、在线客服等即时通讯场景。
2、实时数据展示：WebSocket 可以实时地将数据从服务器推送到客户端，适用于监控系统、实时数据分析等场景。
3、在线游戏：WebSocket 可以实现游戏客户端和服务器之间的实时双向通信，适用于多人在线游戏、竞技游戏等场景。
4、视频直播：WebSocket 可以实现视频流的实时传输和播放，适用于直播平台、在线教育等场景。
5、物联网：WebSocket 可以将传感器数据实时推送到云端，适用于智能家居、智能城市等场景。

websocket缺点:


   1、长连接：WebSocket 使用长连接，因此需要维护连接状态，消耗一定的系统资源。
   2、跨域限制：WebSocket 虽然支持跨域请求，但是在一些浏览器中，需要进行特殊的配置才能实现跨域请求。
   3、安全性：WebSocket 与 HTTP 协议不同，没有同源策略的限制，因此存在一定的安全风险，需要注意安全问题。
   4、兼容性：虽然现代浏览器都支持 WebSocket，但是一些老旧的浏览器不支持 WebSocket，需要进行特殊处理。
   5、无法使用 HTTP 缓存机制：WebSocket 通信的协议与 HTTP 协议不同，无法使用 HTTP 缓存机制，需要单独进行缓存处理。