平台兼容性

weapp.socket.io

weapp.socket.io是基于socket.io的微信程序环境中的客户端，以及socket.io-client浏览器版本的完整功能。

特征

完整功能socket.io风格实现，基于socket.io@2.0版本

注意：仅支持websocket传输，移除轮询传输。

安装

1. 如果使用CLI方式开发项目

   npm i weapp.socket.io

2. 如果使用HBuilderX开发项目

   git clone https://github.com/10cella/weapp.socket.io

   将代码下载下来之后,找到path(存放目录)/weapp.socket.io/dist/weapp.socket.io.js 黏贴复制到你的项目下。

3. 直接点击页面右上角下载按钮

简单使用

Server端使用的是socket.io官方的chat demo 源码, 部署在了heroku上.

<template>
    <view class="content">
       <button type="primary" @click="send">发送消息</button>
    </view>
</template>

<script>

// 引入 weapp.socket.io.js 
import io from '@/util/weapp.socket.io.js';
export default {
    data() {
        return {};
    },
    onLoad() {
        // 建立一个socket连接
        const socket =(this.socket = io('https://socket-io-chat.now.sh/'));

        /**
         * 客户端socket.on()监听的事件：
         */

        // 连接成功
        socket.on('connect', () => {
            console.log('连接成功');
        });
        // 正在连接
        socket.on('connecting', d => {
            console.log('正在连接', d);
        });
        // 连接错误
        socket.on('connect_error', d => {
            console.log('连接失败', d);
        });
        // 连接超时
        socket.on('connect_timeout', d => {
            console.log('连接超时', d);
        });
        // 断开连接
        socket.on('disconnect', reason => {
            console.log('断开连接', reason);
        });
        // 重新连接
        socket.on('reconnect', attemptNumber => {
            console.log('成功重连', attemptNumber);
        });
        // 连接失败
        socket.on('reconnect_failed', () => {
            console.log('重连失败');
        });
        // 尝试重新连接
        socket.on('reconnect_attempt', () => {
            console.log('尝试重新重连');
        });
        // 错误发生，并且无法被其他事件类型所处理
        socket.on('error', err => {
            console.log('错误发生，并且无法被其他事件类型所处理', err);
        });
        // 加入聊天室
        socket.on('login', d => {
            console.log(`您已加入聊天室，当前共有 ${d.numUsers} 人`);
        });
        // 接受到新消息
        socket.on('new message', d => {
            console.log('new message',d);

        });
        // 有人加入聊天室
        socket.on('user joined', d => {
            console.log(`${d.username} 来了，当前共有 ${d.numUsers} 人`);

        });
        // 有人离开聊天室
        socket.on('user left', d => {
            console.log(`${d.username} 离开了，当前共有 ${d.numUsers} 人`);
        });
    },
    methods: {
        send(){
            // 发送消息
            this.socket.emit('new message', '发送消息') 
        }
    }
};
</script>

Tips

• weapp.socket.io 更多使用文档参考socket.io-client-Api