一、WebSocket使用教程PHP
WebSocket是一种在单个TCP连接上进行全双工通信的协议。因为它是全双工的，所以客户端和服务器可以同时发送和接收数据。由于WebSocket协议基于TCP，因此它在网络层（OSI层）和传输层（TCP/IP层）上建立并保持连接。以下是一些用PHP创建WebSocket的步骤：
<!DOCTYPE html>
<html>
<head>
<title>WebSocket简单教程</title>
</head>
<body>
<script language="javascript" type="text/javascript">
var websocket;
if('WebSocket' in window){
websocket = new WebSocket("ws://localhost:9000");
}else{
alert('当前浏览器不支持 WebSocket')
}
websocket.onopen = function(event){
console.log(event)
websocket.send('客户端:你好服务端');
}
websocket.onmessage = function(event){
console.log(event)
}
websocket.onerror = function(event){
console.log(event)
}
websocket.onclose = function(event){
console.log(event)
}
</script>
</body>
</html>
在上面的代码中，我们实例化WebSocket并传递服务器端点方法。然后我们建立了WebSocket。服务端也可以用同样的方式进行WebSocket连接。
二、WebSocket使用教程
WebSocket的使用，可以分为三个部分：
1、客户端与服务器建立连接
在客户端通过WebSocket实例化时，需要通过ip地址或域名：端口号创建连接，并且指定客户端与服务器建立连接成功后的回调函数onopen方法。
2、双方通信
客户端/服务器端通过通过send()方法来进行消息的发送。通过onmessage事件接收到对应的消息，并处理消息。
3、连接关闭
连接关闭有多种情况：由客户端/服务器端调用“close()方法”关闭；没有响应心跳包关闭；后台程序异常关闭；网络异常关闭等，当链接关闭时，会触发onclose事件。
三、WebSocket使用什么协议握手
WebSocket握手阶段，客户端向服务器发送升级请求，升级请求可以看做是HTTP请求的一种，叫做“握手协议”。
当服务器接收到升级请求之后，会通过校验头部的一些信息来确定协议是Websocket，然后进行应答，客户端与服务器开始通过Websocket进行通信。Websocket使用了一次HTTP握手建立连接，但之后的数据传输过程就不会再使用HTTP了，节省了HTTP协议大量浪费的头部信息。
四、Vue中WebSocket使用
Vue.js是一个渐进式JavaScript框架，是一种MVVM模式的前端框架，专注于实现视图与数据之间的双向绑定。Vue.js中使用WebSocket进行通信可以通过vue-native-websocket插件实现。
步骤如下：
1、安装插件
npm install vue-native-websocket --save
2、使用插件
import VueNativeSock from 'vue-native-websocket'
Vue.use(VueNativeSock, 'ws://localhost:3000', {
reconnection: true, //服务器端断开是否自动重连
reconnectionAttempts: 5, //断开后最大重连次数
reconnectionDelay: 3000 //重连等待时长
})
五、WebSocket原理
WebSocket协议是基于TCP的全双工协议，是借用HTTP/HTTPS的握手机制来完成握手，并且在数据传输时采用了一段特定的协议头，数据的传输更为迅速和高效。
以下是WebSocket通信过程的原理：
1、客户端到服务器端的HTTP握手，使用Upgrade和Connection头部。客户端发送一个Upgrade头部，把请求升级到一个新的协议（如WebSocket）
2、会话变成了双向的，并且消息的格式是带有控制位的二进制格式，从而实现了双向交互
3、WebSocket是通过协议切换(HTTP协议构建WebSocket)，握手完成后，使用的是原协议。所以只需要使用一个端口，可以同时进行HTTP通信和WebSocket通信。
六、WebSocket使用步骤
使用WebSocket建立通信有以下三个步骤：
1、建立连接
var socket = new WebSocket("ws://localhost:9000");
2、消息通信
socket.onopen = function (event) {
console.log("连接已经建立成功")
socket.send("这是发送给服务器的消息")
}
socket.onmessage = function (event) {
console.log("来自服务端的消息： ", event.data);
}
socket.onerror = function (event) {
console.log("WebSocket连接发生错误");
}
socket.onclose = function (event) {
console.log("WebSocket连接已经关闭");
}
3、关闭连接
socket.close()
七、WebSocket使用场景
WebSocket使用场景如下：
1、在线游戏应用，多个玩家实时交互，其他玩家实时看到其它玩家的操作，Socket.io库就是专门为实时应用设计的。
2、全球金融市场实时行情信息的网站，实时更新信息，WebSocket将是不错的选择。
3、在线大型协作系统，拥有与其他用户实时共享信息的需求，这时WebSocket能快速及时地更新所有在线用户的数据。
八、WebSocket使用原理
WebSocket使用原理如下：
1、客户端与服务器只需建立一次连接
2、WebSocket基于TCP的，因此效率较高
3、服务端可以主动向客户端发送信息，与传统的HTTP请求不同，WebSocket支持双向通信。
九、WebSocket使用定时器
WebSocket使用定时器可以定时发送一些数据，下面是示例代码：
var socket = new WebSocket("ws://localhost:9000");
setInterval(function(){
socket.send("这是每隔5秒发送一次的消息");
},5000)
十、WebSocket使用前端代码示例
以下是一个完整的WebSocket前端代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSocket Demo</title>
<script language="javascript" type="text/javascript">
var ws;
//判断是否支持WebSocket
if("WebSocket" in window){
ws = new WebSocket("ws://localhost:8070/ws");
//连接成功响应
ws.onopen = function(){
console.log("WebSocket成功连接");
};
//收到服务端的响应
ws.onmessage = function(evt){
console.log("收到服务端的响应", evt.data);
var txt = document.createElement('p');
txt.innerHTML = evt.data;
document.getElementById('content').appendChild(txt);
};
//断开连接响应,自动重连实现
ws.onclose = function(){
console.log("WebSocket已经关闭，进行自动重连...");
setInterval(function() {
ws = new WebSocket("ws://localhost:8070/ws");
}, 5000);
};
//连接错误响应
ws.onerror = function(){
console.log("WebSocket连接错误");
};
}else{
alert("当前浏览器不支持WebSocket");
}
function send(){
var content = document.getElementById('text').value
ws.send(content)
var txt = document.createElement('p')
txt.innerHTML = content
document.getElementById('content').appendChild(txt)
document.getElementById('text').value = ''
}
</script>
</head>
<body>
<p>请在下方输入信息，并按下“发送”按钮发送给服务器进行测试:</p>
<input type="text" id="text" style="width:200px;height:30px;">
<button onclick="send()">发送</button>
<div id="content"></div>
</body>
</html>
