WebSocket学习笔记
Posted coderkey
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WebSocket学习笔记相关的知识，希望对你有一定的参考价值。
WebSocket的使用
产生背景：
在 WebSocket 协议出现以前，创建一个和服务端进双通道通信的 web 应用，需要依赖HTTP协议，进行不停的轮询，这会导致一些问题：
- 服务端被迫维持来自每个客户端的大量不同的连接
- 大量的轮询请求会造成高开销，比如会带上多余的header，造成了无用的数据传输
定义：
WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。(维基百科)
实现：
var wsServer = 'ws://localhost:8888/Demo'; //服务器地址
var websocket = new WebSocket(wsServer); //创建WebSocket对象
websocket.send("hello");//向服务器发送消息
alert(websocket.readyState);//查看websocket当前状态
websocket.onopen = function (evt) {
//已经建立连接
};
websocket.onclose = function (evt) {
//已经关闭连接
};
websocket.onmessage = function (evt) {
//收到服务器消息，使用evt.data提取
};
websocket.onerror = function (evt) {
//产生异常
};
接口方法和属性：
readyState表示连接有四种状态：
CONNECTING (0)：表示还没建立连接；
OPEN (1)： 已经建立连接，可以进行通讯；
CLOSING (2)：通过关闭握手，正在关闭连接；
CLOSED (3)：连接已经关闭或无法打开；
url是代表 WebSocket 服务器的网络地址，协议通常是”ws”或“wss(加密通信)”,send 方法就是发送数据到服务器端；
close 方法就是关闭连接；
onopen连接建立，即握手成功触发的事件；
onmessage收到服务器消息时触发的事件；
onerror异常触发的事件；
onclose关闭连接触发的事件；
websocket前后端通信：
前端：
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<button id="btn">
ajax请求
</button>
<button id="wsbtn">
发送websock请求
</button>
<script type="text/javascript">
// let xhr = new XMLHttpRequest()
// xhr.open('get', 'http://127.0.0.1:8000', true)
// xhr.send()
// xhr.onreadystatechange = function () {
// if (xhr.readyState === 4) {
// if (xhr.status === 200) {
// console.log(xhr.responseText)
// }
// }
// }
let wsBtn = document.querySelector('#wsbtn')
wsBtn.onclick = function() {
// alert(1)
const ws = new WebSocket('ws://127.0.0.1:8001')
ws.onopen = function (e) {
console.log('connection to server opened')
ws.send('hello word')
}
ws.onmessage = function(event) {
let data = event.data
alert(data)
}
}
</script>
</body>
</html>
后端：
const WebSocketServer = require('ws').Server
wss = new WebSocketServer({port: 8001})
wss.on('connection', function (ws) {
console.log('client connected')
ws.on('message', function (message) {
console.log(message)
})
})
以上是关于WebSocket学习笔记的主要内容，如果未能解决你的问题，请参考以下文章