内容简介:初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?答案很简单,因为
为什么需要 WebSocket?
因为个人对概念理解不是很深,文字表达能力不强,如果有关HTTP等方面描述不准确,欢迎纠正,谢谢大家
初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?
答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起 。
举例来说:我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。我们只能使用 "轮询":设置定时器每隔一段时候,就发出一个"询问"(简单理解为ajax请求),了解服务器有没有新的信息 。最典型的场景就是聊天室。
---- 参考了
阮一峰
老师的文章: WebSocket 教程
轮询请求的缺点:
- 不停地链接,断开,链接,断开请求,浪费很多服务器资源
- 浪费带宽
- 移动端浪费流量
websocket的优点:
- 没有同源限制,客户端可以与任意服务器通信,不涉及到跨域的问题。
- 双向通信,服务器可以向客户端主动发送数据。
- 数据格式比较轻量,性能开销小,通信高效。
websocket为什么高效
普通的http通信是基于字符的通信(超文本), websocket一开始是文本协议, 但是链接建立后编程了二进制协议, 数据无需转换等。
socket.io的使用
socket.io是一个封装后的库,原生的 websocket 因为比较复杂,需要自己处理请求头,设置持续链接等等。因此选择使用的socket.io
安装
npm i socket.io -D
socket主要有两个方法:
sock.emit('name', data)
主动发送数据
sock.on('name', function(data
){ })` 接收数据
1.服务端
// server.js const http = require('http') const io = require('socket.io') let server = http.createServer((req, res)=>{}) server.listen(8080) // 建立ws websocket简称ws let wsServer = io.listen(server); wsServer.on('connection', sock=>{ sock.on('aaa', function(a,b){ // name -> 'aaa' 要与前台的 name 保持一致 console.log(a) console.log(b) console.log(arguments) }) // 'aaa'事件名与前台的一致 setInterval(function(){ sock.emit('bbb', '服务器发来的数据') // name -> 'bbb' 要与前台的 name 保持一致 }, 2000) })
2. 客户端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src='http://localhost:8080/socket.io/socket.io.js'></script> <!-- 其实你的本地目录并不存在 XXX/socket.io/socket.io.js 文件,当向后台发送请求后,socket会判断req.url,做一个类似于下面的处理,读取 socket-io.js: if(req.url == '/socket.io/socket.io.js'){ fs.readFile('node_modules/socket.io-client/dist/socket-io.js') } 当然我们也可以直接将socket-io.js复制出来,直接用script引用,但是如果socket更新后我们的代码可能不是最新版,会出现一些问题。 因此不建议这样使用:<script src='./socket.io.js'></script> --> <script> let sock = io.connect('ws://localhost:8080/') // 这里是 ws 协议,不是 http 协议 // sock.emit // sock.on sock.emit('aaa', 'maruihua', 5 ) sock.on('bbb', data => console.log(data)) </script> </head> <body> </body> </html>
上面的代码直接复制下来就能使用。怎么运行nodejs服务我就不再讲了啊。
怎么样,是不是特别简单
妈妈再也不用担心我的学习了~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。