WebSocket学习笔记——无痛入门

2024-01-10 11:10

本文主要是介绍WebSocket学习笔记——无痛入门,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

0.前言
本人一直专注于IoT领域,前些时间尝试了REST API使用PHP Slim框架构建应用。传感器数据的上传可以高效的实现,可以定时上传传感器检测结果,而这些检测结果每条都是有用的。若需要实现相关控制功能,那么设备就需要轮询,而在轮询的过程中仅有几条报文是有用的,绝大多数报文仅仅是HTTP请求首部。为了解决该问题,我找到了WebSocket并决定尝试一下。
    【websocket介绍】
    websocket介绍请参考——【使用 HTML5 WebSocket 构建实时 Web 应用】【WebScoket——维基百科】
    【尝试的困惑】
    简单来说,应用websocket最好的途径便是nodejs,由于没有接触过nodejs所以硬着头皮努力学习。尝试了若干网上的资料和例子之后,我发现根本就分不清哪些代码是浏览器中的javascript,哪些代码是服务器中的nodejs,加上一个著名的nodejs websocket插件socket.io,让websocket尝试之旅异常糊涂
    【本文目的】
    用最少的代码和操作步骤把websocket跑起来。本文只有一处代码——运行浏览器中的HTML+Javascript,取名为HelloWebSocket.html,三个操作步骤——下载并安装mod_pywebsocket、运行其中的standalone.py、使用浏览器打开HelloWebSocket.html。

1.最终效果
    最终效果可以分为4步——1.运行javascript脚本,2.检测浏览器是否支持websocket,3.通过websocket发送内容,4.通过websocket接收内容。服务器侧实现websocket回显功能,即直接向浏览器返回接收内容。

图1 运行javascript脚本

图2 检测浏览器是否支持websocket

图3 通过websocket发送内容

图4 通过websocket接收内容

2.服务器侧实现
    【下载和安装mod_pywebsocket】
    【下载】
    mod_pywebsocket项目【链接】——pywebsocket主要用于websocket的测试和实验目的,pywebsocke运行需要Apache服务器并且需要提前安装和使能mod_python,但是若只运行standalone.py,那么可以在没有apache和mod_python下实践websocket。
    【安装】
    进入pywebsocket目录,输入以下指令
    python setup.py install

    【运行standalone.py】
    进入\src\mod_pywebsocket目录,运行standalone.py
    输入以下指令(请注意指令和路径有关,请务必进入\src\mod_pywebsocket目录
    python standalone.py -p 9998 -d ../example/
    -p参数表示端口号,此处为9998
    -d参数代表文件根目录,此时为上一级目录的example文件夹

    【浏览器中尝试】
    在浏览器中输入localhost:9998/console.html,你可以尝试connent,send和print state等按钮,对websocket有一个基本印象,甚至可以打开chrome开发者工具并查看Network,你会发现只能抓取connet按钮相关HTTP请求,而按下send按钮时虽然浏览器页面产生变化但Network毫无反应

图5 pywebsocket中的console例子

3.客户端实现
    【客户端代码】——HelloWebSocket.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function WebSocketTest()
{if ("WebSocket" in window){alert("WebSocket is supported by your Browser!");// Let us open a web socketvar ws = new WebSocket("ws://localhost:9998/echo");ws.onopen = function(){// Web Socket is connected, send data using send()ws.send("Hello WebSocket");alert("Message is sent");};ws.onmessage = function (evt){var received_msg = evt.data;alert("Message is received: " + received_msg);};ws.onclose = function(){alert("Connection is closed");};ws.error = function(){alert("Error Happended");};}else{// The browser doesn't support WebSocketalert("WebSocket NOT supported by your Browser!");}
}
</script>
</head>
<body>
<div id="sse"><a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>

    【代码说明】
    【1】var ws = new WebSocket("ws://localhost:9998/echo");
            创建一个WebSocket 对象,请注意ws://localhost:9998/echo,ws而非http,并且请注意端口号的设备和服务器端完全相同。
    【2】     
    ws.onopen = function()
     {
        // Web Socket is connected, send data using send()
        ws.send("Hello WebSocket");
        alert("Message is sent");
     }; 
    在websocket的世界中总共有4种事件——onopen、onclose、onmessage和onerror
    【onopen】websocket建立连接完成
    【onclose】websocket连接被关闭或无法建立连接
    【onmessage】websocket收到数据,发送数据对应socket.send方法
    【onerror】websocket发生错误

    【3】
    ws.onmessage = function (evt)  
     {  
        var received_msg = evt.data; 
        alert("Message is received: " + received_msg); 
     };
    通过警告框显示服务器回显内容,服务器向浏览器返回内容位于evt.data中。


图6 websocket的4种事件

    【运行结果】
        见——最终效果

4.总结和期望
    1.继续学习websocket细节,深入协议本身。
    2.利用websocket制作一个网络聊天室,和其他websocket网络聊天室不同的——参与者不但有浏览器还有嵌入式设备。

5.参考资料
【HTML5 - WebSockets Tutorial】
【Start Using HTML5 WebSockets Today】

这篇关于WebSocket学习笔记——无痛入门的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/590590

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss

数论入门整理(updating)

一、gcd lcm 基础中的基础,一般用来处理计算第一步什么的,分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题:

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络(1)sklearn

系列文章目录 监督学习:参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归(SAheart.csv) 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多