wen js php 简单聊天室
本文使用 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="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 class="left ">"+ 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 class="right">"+ 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>
