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 -dfor daemon mode
7 如果启动失败

删除php禁用函数 pctnl-  所有的 重新启动
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐