1 uniapp中安装socket.io
npm install vue-socket.io --save
2 在根目录创建socket.js
import io from 'socket.io-client'
let socket = io.connect('IP地址端口号');
module.exports = socket;
3 在项目中引入文件
import socket from '../../socket.js'
mounted() {
// 监听状态
//聊天室有新人加入,服务端向客户端推送的消息
socket.on('new message', function(data) {
console.log(data);
})
//聊天室有人离开,服务端向客户端推送的消息
socket.on('leaveRoom', function(data) {
console.log(data)
})
},
4 向服务端发送消息
send() {
//自定义动作
socket.emit('new message', {
from: 12,//从哪来
to: 12, //到哪去
content: "1231212312"//发送的内容
})
}
5 服务端使用php
安装PHPsocket.io扩展
composer require workerman/phpsocket.io
如果composer失败,更新之后,再次尝试
composer update
创建启动文件 start.php
<?php
use Workerman\Worker;
use PHPSocketIO\SocketIO;
require_once '../autoload.php';
// Listen port 2021 for socket.io client
$io = new SocketIO(2021);
$io->on('connection', function ($socket) {
$socket->addedUser = false;
// When the client emits 'new message', this listens and executes
$socket->on('new message', function ($data) use ($socket) {
// We tell the client to execute 'new message'
var_dump($data);
$socket->broadcast->emit('new message', array(
'username' => $socket->username,
'message' => $data
));
});
// When the client emits 'add user', this listens and executes
$socket->on('add user', function ($username) use ($socket) {
global $usernames, $numUsers;
// We store the username in the socket session for this client
$socket->username = $username;
// Add the client's username to the global list
$usernames[$username] = $username;
++$numUsers;
$socket->addedUser = true;
$socket->emit('login', array(
'numUsers' => $numUsers
));
// echo globally (all clients) that a person has connected
$socket->broadcast->emit('user joined', array(
'username' => $socket->username,
'numUsers' => $numUsers
));
});
// When the client emits 'typing', we broadcast it to others
$socket->on('typing', function () use ($socket) {
$socket->broadcast->emit('typing', array(
'username' => $socket->username
));
});
// When the client emits 'stop typing', we broadcast it to others
$socket->on('stop typing', function () use ($socket) {
$socket->broadcast->emit('stop typing', array(
'username' => $socket->username
));
});
// When the user disconnects, perform this
$socket->on('disconnect', function () use ($socket) {
global $usernames, $numUsers;
// Remove the username from global usernames list
if ($socket->addedUser) {
unset($usernames[$socket->username]);
--$numUsers;
// echo globally that this client has left
$socket->broadcast->emit('user left', array(
'username' => $socket->username,
'numUsers' => $numUsers
));
}
});
});
Worker::runAll();
?>
6 启动服务
php start.php start
for debug mode
php start.php start -d
for daemon mode
7 如果启动失败
删除php禁用函数 pctnl- 所有的 重新启动