1.什么是WebSocket?
1.WebSocket是一种在单个TCP连接上进行全双工通信的协议。
2.使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
3.在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。2. 优点
WebSocket与HTTP对比图
3. 用例子帮助理解
3.1 客户端例子 (浏览器 javascript)
<html>
<body>
<div style="margin: 0 auto;width: 800px">
<h2>聊天室</h2>
<textarea type="text" style="border: 1px solid black;width: 800px;height: 200px;" id="his"></textarea>
<input type="text" style="width:740px" id="sendMsg"> <button id="send">发送</button>
</div>
</body>
</html>
<script src="./jquery.min.js"></script>
<script>
$(function () {
var ws = new WebSocket("ws://192.168.1.115:2347");
var storage = window.localStorage;
if(!storage.getItem('name')){
var name=prompt("请输入您的名字","");
storage.setItem('name',name);
}
$('#send').click(function () {
msg = $('#sendMsg').val();
$('#sendMsg').val('');
ws.send(storage.getItem('name')+':'+msg);
});
ws.onopen = function() {
$('#his').append("服务器连接成功.....");
$('#his').append("\n");
};
ws.onmessage = function(e) {
$('#his').append(e.data);
$('#his').append("\n");
console.log(e.data);
};
});
</script>
- WebSocket.onopen： 连接成功后调用
- WebSocket.onmessage： 当接收到服务器消息时调用
- WebSocket.onclose： 连接关闭后调用
3.2 服务端例子 (php)
<?php
use Workerman\Worker;
require_once __DIR__ . '/vendor/workerman/workerman/Autoloader.php';
// 当客户端连上来时分配uid，并保存连接，并通知所有客户端
function handle_connection($connection)
{
}
// 当客户端发送消息过来时，转发给所有人
function handle_message($connection, $data)
{
global $text_worker;
foreach($text_worker->connections as $conn)
{
$conn->send($data);
}
}
// 当客户端断开时，广播给所有客户端
function handle_close($connection)
{
}
// 创建一个文本协议的Worker监听2347接口
$text_worker = new Worker("websocket://0.0.0.0:2347");
// 只启动1个进程，这样方便客户端之间传输数据
$text_worker->count = 1;
$text_worker->onConnect = 'handle_connection';
$text_worker->onMessage = 'handle_message';
$text_worker->onClose = 'handle_close';
Worker::runAll();3.3 测试
这里开了2个浏览器测试
简单实现了聊天室的功能 ， 浏览器和服务端 建立了持久性连接 。
当 王多鱼 发消息给 周杰伦 ， 服务器onMessage收到消息 。通过handle_message 这个方法转发到所有客户端 。
客户端收到消息 ，调用 onmessage 把消息显示在页面上。