WebSocket菜鸟教程

看到这想必你了解了webscoket,基本文档原理就不提了！

这张图你能看明白吗？不能没事还有一张更简单的

搞懂这个图很关键，我们与人聊天不是在面对面聊天，其实在于服务器聊天，传统的http是客户端发起请求服务器响应请求，重点是服务器无法给客户端发起请求websocket说白了就是解决这个问题，第一张图轮询是每隔一段时间客户端就向服务器发起请求有没有小明发过来的问话，没有就再隔一段事件再问，这会造成服务器压力很大！！！

前言

手把手撸websocket,最近有需求需要用到websouket,之前没有接触完全小白，百度查资料很多，但是很无厘头（我是菜鸟）接下来一步一步代码完全搞定websocket到底是什么玩意，怎么实现服务器，对完全一点不了解这玩意一类同学会有很大帮助，比如我！

二、代码案例

1.html

简单直白在html中创建一个输入框，按钮，盒子

    <!-- 输入内容 --><input type="text" name="" id="" placeholder="请输入内容"><!-- 发送请求 --><button>发送</button>   <!-- 接收websocket服务得数据 --><div></div>

给盒子一个简单样式

   <style>div{width: 300px;height: 200px;border: 1px solid #000;margin-top: 20px;}</style>

2.js部分

// 'ws://echo.websocket.org/'这个服务地址是websocket官方文档中的地址
// 不用纠结，后面下一个案例会把他换成自己的
这里只要是了解怎么个过程

  <script>var input=document.querySelector('input')var button=document.querySelector('button')var div=document.querySelector('div')// 'ws://echo.websocket.org/'这个服务地址是websocket官方文档中的地址// 不用纠结，后面下一个案例会把他换成自己的// 创建websocket服务地址const socket=new WebSocket('ws://echo.websocket.org/') // 当与服务器连接成功出发open事件（websocket四大基本事件https://www.runoob.com/html/html5-websocket.html）socket.addEventListener('open',function(){div.innerHTML='连接服务器成功'})button.addEventListener('click',function(){var value=input.valueconsole.log(value);socket.send(value)})socket.addEventListener('message',function(e){div.innerHTML=e.data})</script>

这边省略一个关闭服务事件下个文章会写出来

该处使用的url网络请求的数据。

总结

创建完成会显示连接服务器成功

在input输入框中输入文字会在盒子中显示这样，基本的websocket服务器就能接收数据与发送数据了

下一篇文章会简单实现自己的websocket服务器，多窗口显示数据案例

WebSocket菜鸟教程相关推荐

websocket菜鸟教程（１.１）
创建自己的websocket服务先了解node.js websocket 的基本使用https://www.npmjs.com/package/nodejs-websocket 第一步先安装 npm ...
WebSocket菜鸟教程二
websocket服务器,多窗口显示数据案例 //注意事项//1.因为WebSocket存在一段时间后自动断开链接的问题,故采用每次读写操作都重新链接的方式://2.服务端总链接数量有限,因此每次重新 ...
Java菜鸟教程笔记
参考:http://www.runoob.com/java/java-tutorial.html Java 基本数据类型内置数据类型引用类型 Java 变量类型 Java 局部变量实例变量类变 ...
python scrapy菜鸟教程_scrapy学习笔记（一）快速入门
安装Scrapy Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv.json等文件中. 首先我们安装Scrapy. pip install sc ...
JS实例学习笔记——w3cschool+菜鸟教程
基础实例--w3cschool write() document.write("this is a string");//生成普通文本 document.write("& ...
html class 位置,HTML class 属性 | 菜鸟教程
HTML class 属性实例在 HTML 文档中使用 class 属性: 菜鸟教程(runoob.com) h1.intro {color:blue;} p.important {color:g ...
python3菜鸟教程中文-我的python学习方法和资源整理，干货分享
怎么自学python 现在是真正的干货开始了我实习的时候,python完全零基础,我看的第一个入门资料是一个视频教程,我觉得非常不错,分享给大家 Python教程_400集Python从入门到精通教 ...
菜鸟教程python3-Python数据分析，学习路径拆解及资源推荐
原标题:Python数据分析,学习路径拆解及资源推荐关于Python数据分析,其实网上能够找到的学习资源很多,主要分为两类: 一类是提供各种资源的推荐,比如书单.教程.以及学习的先后顺序: 另一类是 ...
python菜鸟教程官网绘图-NumPy Matplotlib
NumPy Matplotlib Matplotlib 是 Python 的绘图库. 它可与 NumPy 一起使用,提供了一种有效的 MatLab 开源替代方案. 它也可以和图形工具包一起使用,如 P ...

WebSocket菜鸟教程

WebSocket菜鸟教程

前言

二、代码案例

1.html

2.js部分

总结

下一篇文章会简单实现自己的websocket服务器，多窗口显示数据案例

WebSocket菜鸟教程相关推荐

最新文章

热门文章