前端培训-中级阶段(25)-Web Socket网络编程

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。这块内容是我早就想下手的,但是因为之前服务没跑起来。所以文章没写成。今天经过一下午,终于鼓捣好了demo地址

websocket


webSocket 可以帮助浏览器与服务器完成双向通信。


在 webSocket 出现之前,我们想接收到服务端的数据需要使用一些特殊手段,比如 轮询、长连接。


构造函数


var protocol = 'wss'
if(location.protocol == "http:") protocol = 'ws'
ws = new WebSocket(protocol+"://ws.lilnong.top");


WebSocket(url[, protocols]) 传入 webScoket服务的URL,即可建立连接。


属性与方法


名称 类型 描述
url 属性 当前连接的绝对路径
protocol 属性 下属协议,对应构造函数第二个参数
readyState 属性 当前的链接状态
bufferedAmount 属性 当前连接的绝对路径
binaryType 属性 数据类型:blob
close() 方法 关闭当前链接
send() 方法 发送数据到服务端


readyState 状态码


常量 数值 描述
WebSocket.CONNECTING 0 正在连接中
WebSocket.OPEN 1 已经连接并且可以双向通讯
WebSocket.CLOSING 2 正在关闭中
WebSocket.CLOSED 3 已关闭或者没有连接成功


WebSocket.send() 方法


WebSocket.send(String | ArrayBuffer | Blob | ArrayBufferView);
var protocol = 'wss'
if(location.protocol == "http:") protocol = 'ws'
wsTest = new WebSocket(protocol+"://ws.lilnong.top");
wsTest.onclose = ()=>console.log('onclose');
wsTest.onerror = ()=>console.log('onerror');
wsTest.onmessage = ()=>console.log('onmessage');
wsTest.onopen = ()=>console.log('onopen')
var blob = new Blob(['lilnong.top','水的一批'])
filereader = new FileReader()
filereader.readAsArrayBuffer(blob);
filereader.onload = function(){
    wsTest.send(filereader.result)
    wsTest.send(new Int8Array(filereader.result))
}
wsTest.send(blob)
wsTest.send('lilnong.top水的一批1')


可以看到blob其实是发送失败了。一般来说我们还是发送String居多。


bVbzZLA.webp.jpg


WebSocket.close() 方法


WebSocket.close([code] [, reason]);


  1. code 表示错误码。默认为1005。CloseEvent
  2. reason 为错误码的描述。


回调函数


函数名称 触发时机 备注
onclose 当连接关闭后的回调函数 主动close或者被动close都会触发
onerror 当连接失败后的回调函数 只有被动close会触发
onmessage 当接收到服务端发送数据时的回调函数 e.data为服务端返回的信息
onopen 当连接成功后的回调函数 之后就可以进行交互了


实现


node


依赖ws = require('ws');这个 websocket 模块。


我们可以把connection 中的连接对象保存到全局的数组。这样我们就可以广播消息了。


close把连接对象移出数组。


var ws = require('ws');
var socketServer = ws.Server;
var wss = new socketServer({port: 8090});//创建服务,监听8090端口
// 监听连接
wss.on('connection', function(ws){
    // 推送消息
    ws.send(JSON.stringify({type: 'start',time: Date.now()}))
    // 接收浏览器端发送的消息
    ws.on('message',function(message){
        console.log(JSON.parse(message))
    })
    // 监听连接断开
    ws.on('close', function() {})
})


html


var initWs = function initWs(){
    var protocol = 'wss'
    if(location.protocol == "http:") protocol = 'ws'
    ws = new WebSocket(protocol+"://ws.lilnong.top");
    ws.onopen = function (e) {console.log('连接成功');}
    //收到消息处理
    ws.onmessage = function (e) {
        console.log(e.data)
    }
    //监听连接关闭情况
    ws.onclose = function (e) {
        setTimeout(v=>initWs(), 2000);//自动重连
        console.log('连接关闭');
    }
}
initWs();
setInterval(v=>{ws.send(JSON.stringify({type: 'ping'}));}, 10 * 1000);// 保持心跳


总结


  1. socket 需要保存心跳,一般是 ping、pong 逻辑。


  1. 超时时间是可以人为设置的,所以心跳时间也是可以选择的。(我的是20s,所以心跳是10s。公司之前做的5m)。


  1. socket 如果断线要注意重连。因为都会落到close里面,所以我们可以直接在close里面重连。
  1. 部分情况要注意重连频率、以及重连次数的策略。


  1. 发送和接受只能是字符串,所以要JSON.stringify()
相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
52 3
|
2月前
|
前端开发 JavaScript 测试技术
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
2月前
|
前端开发 测试技术 持续交付
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
3天前
|
Kubernetes 安全 Devops
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
22 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
|
24天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
34 3
|
1月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
47 2
|
1月前
|
Kubernetes 网络协议 Python
Python网络编程:从Socket到Web应用
在信息时代,网络编程是软件开发的重要组成部分。Python作为多用途编程语言,提供了从Socket编程到Web应用开发的强大支持。本文将从基础的Socket编程入手,逐步深入到复杂的Web应用开发,涵盖Flask、Django等框架的应用,以及异步Web编程和微服务架构。通过本文,读者将全面了解Python在网络编程领域的应用。
31 1
|
2月前
|
Java
[Java]Socket套接字(网络编程入门)
本文介绍了基于Java Socket实现的一对一和多对多聊天模式。一对一模式通过Server和Client类实现简单的消息收发;多对多模式则通过Server类维护客户端集合,并使用多线程实现实时消息广播。文章旨在帮助读者理解Socket的基本原理和应用。
29 1