HTML链接WebSocket简单案例
时间：2023-07-27浏览次数：293
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>websocket-demo</title>
<link rel="stylesheet" href="">
</head>
<style>
.txtcont{border: 1px solid black; width: 500px;height: 500px;}
</style>
<body>
<input type="text" name="txt">
<button>提交</button>
<div class="txtcont"></div>
<script>
var input = document.querySelector('input');
var button = document.querySelector('button');
var div = document.querySelector('div');
//1、创建 WebSocket 严格区分大小写 参数是WebSocket的服务地址
//var socket = new WebSocket('ws://echo.websocket.org');
var socket = new WebSocket('ws://127.0.0.1:2346');
//2、open： 当WebSocket服务链接成功是触发
socket.addEventListener('open',function(){ //添加一个监听事件
console.log('连接成功');
div.innerHTML = '服务连接成功';
})
//3、 主动向服务器推送数据
button.addEventListener('click',function(){ //按钮点击
var txt = input.value; //获取文本框的值
socket.send(txt); //主动发送数据
})
//4、接收 WebSocket 推送的数据
socket.addEventListener('message',function(e){
console.log(e.data); //服务器返回的数据
div.innerHTML = e.data; //写入到div中
})
//5、 服务断开
socket.addEventListener('close',function(){
div.innerHTML = '服务断开';
});
</script>
</body>
</html>PHP-WebSocket服务端：
这是一个单独的服务，不用嵌套在任何一个框架都可以使用
首先有一个空目录 php-websocket
在该目录下有一个 test.php 文件
在该目录下下载依赖模块 workerman
composer require workerman/workerman
在 test.php 编写代码
<?php
require_once __DIR__ . '/vendor/autoload.php';//注意：这里是绝对路径，请查看你是否可以访问到该文件
use Workerman\Worker;
// 创建一个Websocket服务器，websocket服务器监听端口2346
$ws_worker = new Worker("websocket://0.0.0.0:2346");
// 设置当前Worker实例启动多少个进程
$ws_worker->count = 4;
// 在新连接到来时发出
$ws_worker->onConnect = function($connection) {
echo "New connection\n";
};
// 接收数据时发出
$ws_worker->onMessage = function($connection, $data) {
// Send hello $data
$connection->send('hello ' . $data);
};
// 连接关闭时发出
$ws_worker->onClose = function($connection) {
echo "Connection closed\n";
};
// 运行worker
Worker::runAll();最后启动该服务
php test.php start
如下图：
