本文使用 websocket + gatewayworker 搭的一個簡單聊天室，隨便寫了點樣式，大家不要介意哈，主要看流程就好
html代碼，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.content{
width: 500px;
height: 500px;
border: 1px solid red;
}
.left{
max-width: 200px;
}
.right{
float: right;
max-width: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
</div>
<input type="text" id="content">
<button class="send">發送</button>
</div>
<script src="https://www.cnblogs.com/quan846951943/p/jquery-3.6.0.min.js"></script>
<script>
let ws = new WebSocket('ws://127.0.0.1:8282');
let user_id = getQueryVariable('user_id');
let to = getQueryVariable('to');
ws.onopen = function(e){
console.log('連接成功');
}
ws.onmessage = function(e){
let data = JSON.parse(e.data);
switch (data.cmd){
case 'init': send('bindUid',{client_id: data.client_id,user_id: user_id});break;
case 'message':
$('.content').append('<div >'+ data.data.content +'</div><div style="clear:both;"></div>');
break;
}
console.log('收到資訊',data);
}
ws.onerror = function(e){
cnsole.log('連接失敗');
}
$('.send').click(function(){
if(to == ''){
alert('缺少發送人');
}
let content = $('#content').val()
$('.content').append('<div >'+ content +'</div><div style="clear:both;"></div>');
send('message',{to:to,content:content,user_id:user_id});
})
const send = (cmd,data) => {
ws.send(JSON.stringify({
cmd: cmd,
data: data
}))
}
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
</script>
</body>
</html>
gatewayworker 主要修改以下兩個檔案，
Applications/YourApp/start_gateway.php
將默認的tcp 協議改為websocket
Applications/YourApp/Events.php 主要邏輯在這里
<?php //declare(ticks=1); use \GatewayWorker\Lib\Gateway; /** * 主邏輯 * 主要是處理 onConnect onMessage onClose 三個方法 * onConnect 和 onClose 如果不需要可以不用實作并洗掉 */ class Events { /** * 當客戶端連接時觸發 * 如果業務不需此回呼可以洗掉onConnect * * @param int $client_id 連接id */ public static function onConnect($client_id) { $arr = [ 'cmd' => 'init', 'client_id' => $client_id ]; Gateway::sendToClient($client_id, json_encode($arr)); } /** * 當客戶端發來訊息時觸發 * @param int $client_id 連接id * @param mixed $message 具體訊息 */ public static function onMessage($client_id, $message) { $message = json_decode($message,true); $cmd = $message['cmd']; $data = $message['data']; switch($cmd){ case 'bindUid': Gateway::bindUid($data['client_id'], $data['user_id']); Gateway::sendToUid($data['user_id'],json_encode(['cmd'=>'ready','data'=>$data])); break; case 'message': Gateway::sendToUid($data['to'],json_encode(['cmd'=>'message','data'=>['user_id'=>$data['user_id'],'content'=>$data['content']]])); break; } } /** * 當用戶斷開連接時觸發 * @param int $client_id 連接id */ public static function onClose($client_id) { } }
demo 下載地址
鏈接：https://pan.baidu.com/s/1ESjQDYx1mVJ0gWERsL2tUw
提取碼：8888
環境運行
windows 運行 \GatewayWorker 下雙擊運行start_for_win.bat 即可運行環境
liunx 中 在\GatewayWorker 中執行
先執行 php start.php start 看看有沒有報錯 （有報錯那就自己解決咯，一般都是php 禁用函式的問題）
如果沒有報錯 那就ctrl + c 退出 在用 php start.php start -d 以守護行程的方式打開
使用方式
一個瀏覽器打開： demo 目錄中的 jq-index.html 并在地址后面加上 ?user_id=1&to=2 引數 如 jq-index.html?user_id=1&to=2
另一個瀏覽器打開： demo 目錄中的 jq-index.html 并在地址后面加上 ?user_id=1&to=2 引數 如 jq-index.html?user_id=2&to=1
就可以使用啦 ，兩個鏈接地址就是引數不同罷了，本人比較懶，懶的寫那邊么多樣式，頁面湊合用就行
如果對你有用，麻煩點個關注
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/518828.html
標籤：PHP
上一篇：噢！查重原來是這樣實作的啊！
下一篇：python基礎-集合的常用操作