js - WebSocket应用小案例

WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。

// 判断浏览器是否支持websocket
if(window.WebSocket){console.log("您的浏览器支持WebSocket");//创建WebSocket连接var ws = new WebSocket("ws://{ip}:{port}");// 当一个 WebSocket 连接成功时触发。ws.onopen = function(){console.log("socket连接成功!");ws.send("hello");}// 当通过 WebSocket 收到数据时触发。ws.onmessage = function(e){console.log(e.data);messageHandler(e.data);}//当一个 WebSocket 连接被关闭时触发。ws.onclose = function(e){console.log("scoket关闭!");}// 当一个 WebSocket 连接因错误而关闭时触发，例如无法发送数据时。ws.onerror = function(e){console.log(error);}// 对接收到的消息进行处理messageHandler(msg){// 解析数据}
}else{console.log("您的浏览器不支持WebSocket");
}

向服务器发送数据:
数据作可以是字符串，Blob，或者ArrayBuffer。

以字符串的形式发送数据

sendMessage(){ws.send("这是一个字符串");
}

使用 JSON 发送对象

sendMessage(){var object = {name: "数据对象",type: "发送JSON"}ws.send(JSON.stringify(object));
}

处理接收到的消息:

接收到的数据是JOSN

messageHandler(msg){// 解析JOSN数据var obj = JSON.parse(msg);// 根据解析到的数据分别调用相应的处理方法// ...
}

参考资料:WebSocket接口文档

js - WebSocket应用小案例相关推荐

JavaScript 国庆倒计时小案例
本次实现js国庆倒计时小案例开发工具与关键技术:Visual Studio 2015 JavaScript 当然首先还是先写出大概样式如下图: 之后便是我的css样式了: 下图便是在页面加载完成的 ...
golang gin框架gorilla的websocket小案例
golang gin框架中gorilla的websocket案例在gin框架下导入包 "github.com/gorilla/websocket" r.GET("/t ...
【Node.js学习小案例】DNS域名解析一
Node.js 百度百科: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的易于扩展的网络应用· Node.js 借助事件驱动, 非阻塞I/ ...
javaScript小案例------js实现手风琴效果篇
原生js书写手风琴效果 js手风琴效果第一种方法手风琴需求 html和css: html: css: js animate.js index.js 第二种方法 js手风琴效果我用了两种方法来完成 ...
js定时器实现倒计时小案例
开发工具与关键技术: vscode /javascript 撰写时间:2022/8/19 案例介绍倒计时是网页中经常看到的一个小功能,其实也很简单,掌握了js的日期对象就能写出来了,注意获取时分秒的 ...
Vue里使用three.js实现3D模型小案例
Vue里使用three.js实现3D模型小案例 1.下载three.js包 npm install three --save 或者 yarn add three --save 2.组件代码 <t ...
JS小案例总结（JS基础案例）
JS小案例总结 JS小案例总结案例一:JS实现tab选项卡功能案例二:JS实现盒子拖拽功能案例三:JS实现导航条吸顶效果案例四:JS实现图片懒加载结构案例五:JS实现简易弹幕功能案例六:J ...
JS小案例--关于时间--限时购
JS小案例–关于时间–限时购界面显示和功能实现功能实现设置了一个特定的日期和当前时间相差实现折合成天小时分钟秒使用性 :像某宝的商品限时购所以很实用用到的知识点为日期对象设 ...
js轮播图按钮小案例
案列介绍我们在写网页和app的时候经常看到轮播图,通过小按钮或者左右箭头按钮操作切换图片,点击到当前的小按钮并改变它的样式,并实现切换图片,本案例是写一个切换按钮的小案例. 一.大概步骤注意:有很 ...

js - WebSocket应用小案例

js - WebSocket应用小案例相关推荐

最新文章

热门文章