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 把消息显示在页面上。