js中简单的使用webSocket

创建websocket对象

websocket事件

websocket方法

实现简单链接

    <input type="text" placeholder="请输入内容"><button>发送</button><div></div><script>let input = document.querySelector('input')let button  = document.querySelector('button')let div = document.querySelector('div')let  websocket = new WebSocket('ws://echo.websocket.org')// open:当前websocket服务器链接成功时候触发websocket.addEventListener('open',function(){div.innerHTML = '链接服务成功了'})
</script>

浏览器显示

点击事件触发

// 点击事件主动发送websocke消息
button.addEventListener('click',function(){let value = input.valuewebsocket.send(value)
})

浏览器截图

最后一步

仅供参考谢谢

js中简单的使用webSocket相关推荐

JS中简单实现观察者模式
文章目录 JS中简单实现观察者模式 1.1什么是观察者模式 1.1.1观察者模式图解 1.1.2观察者模式文字阐述 1.2 JS中的代码实现 1.2.1目标类 1.2.2观察者类 1.2.3 HTML ...
JS中简单实现 xml转json 导入即可使用
JS中超级简单xml转json 导入即可使用在网上找了一大队xml转换json 都是又长有不可用,乱七八糟最后只能自己些了简单方便,传入即可使用 function xmljson(xml) ...
JS中简单数据类型和复杂数据类型
简单数据类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型值类型:简单数据类型/基本数据类型,在储存变量中存储的是值本身,因此叫做值类型. string,number,boolean,unde ...
JS中简单原型的使用
转载于:https://www.cnblogs.com/hwgok/p/6163335.html
JS中简单的点击事件
一.点击后弹出事件 <!DOCTYPE html> <html><head><meta charset="utf-8"><ti ...
深入探究js中无所不在的this
黄金守则: this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window而当函数被作为某个对象的方法调用时, this等于那个对象. 下面是一些相关实践: --------- ...
node.js搭建简单服务器，用于前端测试websocket链接方法和性能测试
WebSocket简介谈到Web实时推送,就不得不说WebSocket.在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询 (Polling)和Comet技术,Come ...
js最简单的几个特效_高阶函数不会用?教你JS中最实用的几个高阶函数用法
不废话,先来看下什么是高阶函数高阶函数函数可以作为参数传递函数可以作为返回值输出函数作为参数传递回调函数在ajax异步请求的过程中,回调函数使用的非常频繁在不确定请求返回的时间时,将ca ...
js 判断变量是否有值返回bool_基础 |判断 JS 中的变量类型竟然可以如此简单
原标题:基础 |判断 JS 中的变量类型竟然可以如此简单嗨这里是IMWEB 一个想为更多的前端人享知识助发展觅福利有情怀有情调的公众号欢迎关注转发让更多的前端技友一起学习发展~ 正文 ...

js中简单的使用webSocket

js中简单的使用webSocket

js中简单的使用webSocket相关推荐

最新文章

热门文章