WebSocket 详细教程

WebSocket 是一种网络通信协议,它实现了客户端与服务器之间的全双工通信。与传统的 HTTP 协议不同,WebSocket 允许服务器主动向客户端发送消息,这对于实时应用(如在线聊天、股票交易、游戏等)来说非常重要。

1. 工作原理

WebSocket 的工作原理如下:

  1. 客户端向服务器发送一个 HTTP 请求,请求建立 WebSocket 连接。
  2. 服务器收到请求后,会返回一个 HTTP 响应,响应中包含一个 101 Switching Protocols 状态码,表示同意建立 WebSocket 连接。
  3. 服务器和客户端通过 TCP 连接进行通信,数据格式为 JSON、二进制或文本。

2. 优点

WebSocket 相比 HTTP 协议有以下优点:

  1. 实时性:服务器可以主动向客户端发送消息,实现实时通信。
  2. 双向通信:客户端和服务器之间可以同时发送和接收数据。
  3. 性能:WebSocket 连接建立后,数据传输效率更高,减少了 HTTP 请求的次数。
  4. 兼容性:WebSocket 协议在大多数浏览器中得到了支持,无需额外插件。

3. 实现

实现 WebSocket 通信通常需要使用 JavaScript 和后端语言(如 Node.js、Python、Java 等)。以下是一个简单的 WebSocket 实现示例:

客户端(JavaScript)
// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');
// 连接打开时触发
socket.onopen = function(event) {console.log('连接成功');
};
// 接收到服务器消息时触发
socket.onmessage = function(event) {console.log('收到消息:', event.data);
};
// 连接关闭时触发
socket.onclose = function(event) {console.log('连接关闭');
};
// 连接出错时触发
socket.onerror = function(error) {console.log('连接出错:', error);
};
// 发送消息到服务器
function sendMessage(message) {socket.send(message);
}
服务器端(Node.js)
const WebSocket = require('ws');
// 创建 WebSocket 服务器实例
const wss = new WebSocket.Server({ port: 8080 });
// 监听连接事件
wss.on('connection', function(socket) {console.log('新连接');// 监听接收消息事件socket.on('message', function(message) {console.log('收到消息:', message);});// 发送消息到客户端function sendMessageToClient(message) {socket.send(message);}// 每隔1秒向客户端发送消息setInterval(() => {sendMessageToClient('服务器消息');}, 1000);
});

4. API

WebSocket 提供了以下 API:

  1. WebSocket():创建一个新的 WebSocket 连接。
  2. open():连接成功打开时触发。
  3. onmessage:接收到服务器消息时触发。
  4. send():向服务器发送消息。
  5. close():关闭 WebSocket 连接。

5. 示例应用

WebSocket 广泛应用于各种实时应用,如在线聊天、股票交易、游戏等。以下是一个简单的在线聊天示例:

客户端(JavaScript)
// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');
// 连接打开时触发
socket.onopen = function(event) {console.log('连接成功');
};
// 接收到服务器消息时触发
socket.onmessage = function(event) {const message = document.createElement('div');message.textContent = '服务器:' + event.data;document.body.appendChild(message);
};
// 连接关闭时触发
socket.onclose = function(event) {console.log('连接关闭');
};
// 连接出错时触发
socket.```
socket.onerror = function(error) {console.log('连接出错:', error);
};
// 发送消息到服务器
function sendMessage(message) {socket.send(message);
}
// 在输入框中添加发送按钮
const input = document.createElement('input');
input.type = 'text';
input.placeholder = '输入消息';
input.addEventListener('input', function(event) {sendMessage(event.target.value);
});
document.body.appendChild(input);
服务器端(Node.js)
const WebSocket = require('ws');
// 创建 WebSocket 服务器实例
const wss = new WebSocket.Server({ port: 8080 });
// 监听连接事件
wss.on('connection', function(socket) {console.log('新连接');// 监听接收消息事件socket.on('message', function(message) {console.log('收到消息:', message);// 广播消息给所有客户端wss.clients.forEach(function each(client) {if (client !== socket && client.readyState === WebSocket.OPEN) {client.send(message);}});});// 发送消息到客户端function sendMessageToClient(message) {socket.send(message);}// 每隔1秒向客户端发送消息setInterval(() => {sendMessageToClient('服务器消息');}, 1000);
});

6. 安全性

WebSocket 协议本身是安全的,但你需要确保 WebSocket 连接是通过 HTTPS 协议建立的,以防止中间人攻击。在 Node.js 中,你可以使用 wss 模块来创建一个安全的 WebSocket 服务器。

7. 总结

WebSocket 是一种强大的网络通信协议,它允许服务器和客户端之间进行实时、双向通信。在 WebSocket 连接中,服务器可以主动向客户端发送消息,这对于实时应用来说非常重要。通过使用 JavaScript 和后端语言,你可以轻松实现 WebSocket 通信。在实际应用中,WebSocket 已被广泛应用于在线聊天、股票交易、游戏等领域。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/686394.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode 11-15题

盛最多雨水的容器 数组的第 i i i个数字表示这个位置隔板的高度,选择哪两块板子可以装最多的水,返回可以存储的最大水量。 有一种双指针的贪心策略:如果左边的指针所在的挡板低,就将左边的指针右移,否则将右边的指针左…

MATLAB知识点:nchoosek函数(★★★☆☆)用来计算组合数,也能返回从向量v中抽取k个元素的所有组合

讲解视频:可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇(数学建模清风主讲,适合零基础同学观看)_哔哩哔哩_bilibili 节选自第3章:课后习题讲解中拓展的函数 在讲解第三…

算法训练营day28(补), 贪心算法2

//122. 买卖股票的最佳时机 II func maxProfit(prices []int) int { result : 0 //利润总和 for i : 1; i < len(prices); i { if prices[i]-prices[i-1] > 0 { result result (prices[i] - prices[i-1]) } } return result } //55. 跳跃游戏 func canJump(nums []…

模型 4E(交换、体验、随处、传教)理论

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_总纲目录。重在提升认知。聚焦体验营销。 1 模型 4E(交换、体验、随处、传教)理论的应用 1.1 4E 理论在软件产品营销中的应用 某软件公司利用 4E 理论提升软件产品的市场占有率。具体如下&#xff1a; Exchange&a…

人工智能学习与实训笔记(四):神经网络之NLP基础—词向量

人工智能专栏文章汇总&#xff1a;人工智能学习专栏文章汇总-CSDN博客 本篇目录 四、自然语言处理 4.1 词向量 (Word Embedding) 4.1.1 词向量的生成过程 4.1.2 word2vec介绍 4.1.3 word2vec&#xff1a;skip-gram算法的实现 4.2 句向量 - 情感分析 4.2.1 LSTM (Long S…

C语言之日历问题

一、代码展示 #include<stdio.h> int leapyear(int year)//判断是不是闰年函数 {if (year % 4 0 && year % 100 ! 0 || year % 400 0)return 1;elsereturn 0; } int days(int year, int month, int* day)//判断一个月有几天 {if (month ! 2)return day[month…

7.JS里表达式,if条件判断,三元运算符,switch语句,断点调试

表达式和语句的区别 表达式就是可以被求值的代码比如什么a 1 语句就是一段可以执行的代码比如什么if else 直接给B站的黑马程序员的老师引流一波总结的真好 分支语句 就是基本上所有的语言都会有的if else 语句就是满足不同的条件执行不同的代码&#xff0c;让计算机有条件…

【Java程序员面试专栏 Java领域】Java虚拟机 核心面试指引

关于Java 虚拟机部分的核心知识进行一网打尽,主要包括Java虚拟机的内存分区,执行流程等,通过一篇文章串联面试重点,并且帮助加强日常基础知识的理解,全局思维导图如下所示 JVM 程序执行流程 包括Java程序的完整执行流程,以及Javac编译,JIT即时编译 Java程序的完整执…

C++抽象类、纯虚函数和接口

在C中&#xff0c;抽象类是一种特殊的类&#xff0c;旨在作为其他类的基类使用。它定义了一组接口&#xff0c;派生类应该实现这些接口。 抽象类的主要特征 至少包含一个纯虚函数&#xff0c;不能被直接实例化&#xff0c;为派生类提供基础结构 纯虚函数&#xff08;Pure Vi…

会声会影2024新功能及剪辑视频步骤教程

会声会影2024的新功能主要包括&#xff1a; 全新的标题动态与特效&#xff1a;用户可以为文字标题指定进入、中场和退出的不同动态效果&#xff0c;比如闪现进入、中场弹跳和淡出退出等&#xff0c;让文字标题更具动感。此外&#xff0c;还新增了多个标题特效&#xff0c;包括…

作物模型狂奔 Apsim 脚本并行思路

这里没图&#xff0c;去B站看看 整体思路&#xff1a;Python -》R -》Apsimx 0、准备工作 0.0 电脑环境 我用的Win10啦&#xff0c;Linux、Mac可能得自己再去微调一下。 PS&#xff1a;一直没上win11&#xff0c;因为win11 开始菜单用着实在难顶。 !在这里插入图片描述](h…

037-安全开发-JavaEE应用JNDI注入RMI服务LDAP服务JDK绕过调用链类

037-安全开发-JavaEE应用&JNDI注入&RMI服务&LDAP服务&JDK绕过&调用链类 #知识点&#xff1a; 1、JavaEE-JNDI注入-RMI&LDAP 2、JavaEE-漏洞结合-FastJson链 3、JavaEE-漏洞条件-JDK版本绕过 演示案例&#xff1a; ➢JNDI注入-RMI&LDAP服务 ➢JNDI注…

一文彻底搞懂MySQL主从同步

文章目录 1. 简介2. 基本原理3. 实现方式4. 常见的主从架构模式4.1 一主一从4.2 一主多从4.3 双M4.4 联级复制4.5 多主一从 5. 常见问题 1. 简介 MySQL主从同步是一种数据库复制技术&#xff0c;它可以将一台MySQL数据库&#xff08;称为主服务器&#xff09;的数据复制到另一…

阿里云香港服务器cn2速度测试和租用价格表

阿里云香港服务器中国香港数据中心网络线路类型BGP多线精品&#xff0c;中国电信CN2高速网络高质量、大规格BGP带宽&#xff0c;运营商精品公网直连中国内地&#xff0c;时延更低&#xff0c;优化海外回中国内地流量的公网线路&#xff0c;可以提高国际业务访问质量。阿里云服务…

YOLO v5项目实战 P5 解决运行detect文件时设置了--view-img但是显示不出来的问题

up主讲的实时显示目标检测后的图片的两种方法&#xff1a; &#xff08;1&#xff09;在下面的Terminal中输入下列命令&#xff1a; python detect.py --view-img &#xff08;2&#xff09;点击进入右上方的detect的Edit Configurations 然后在这个参数这里输入 --view img…

人工智能学习与实训笔记(八):百度飞桨套件使用方法介绍

人工智能专栏文章汇总&#xff1a;人工智能学习专栏文章汇总-CSDN博客 本篇目录 八、百度飞桨套件使用 8.1 飞桨预训练模型套件PaddleHub 8.1.1 一些本机CPU可运行的飞桨预训练简单模型&#xff08;亲测可用&#xff09; 8.1.1.1 人脸检测模型 8.1.1.2 中文分词模型 8.1…

自然语言编程系列(四):GPT-4对编程开发的支持

在编程开发领域&#xff0c;GPT-4凭借其强大的自然语言理解和代码生成能力&#xff0c;能够深刻理解开发者的意图&#xff0c;并基于这些需求提供精准的编程指导和解决方案。对于开发者来说&#xff0c;GPT-4能够在代码片段生成、算法思路设计、模块构建和原型实现等方面给予开…

《数字电子电路》 课程设计:十字路口红绿灯自动控制系统(上)(multisim仿真及PCB实现)

&#xff08;一&#xff09;前言 本系列文章就笔者在大二下学期进行《数字电子线路》课程设计的题目&#xff1a;十字路口红绿灯自动控制系统 进行详细的讲解&#xff0c;希望对读者有所帮助。 &#xff08;二&#xff09;目录 一、主要指标及要求 二、电路工作原理 1、工作原…

P15---总电磁转矩T

正弦波驱动模式工作的永磁同步电动机的总电磁转矩 T clear clc% 15页表达式 syms Omega theta E I e_A E*sind(theta) e_B E*sind(theta-120) e_C E*sind(theta-240)i_A I*sind(theta) i_B I*sind(theta-120) i_C I*sind(theta-240)P e_A*i_A e_B*i_B e_C*i_CT P/Om…

Unity设备分级策略

Unity设备分级策略 前言 之前自己做的设备分级策略&#xff0c;在此做一个简单的记录和思路分享。希望能给大家带来帮助。 分级策略 根据拟定的评分标准&#xff0c;预生成部分已知机型的分级信息&#xff0c;且保存在包内&#xff1b;如果设备没有被评级过&#xff0c;则优…