Native Socket.IO and Android

原文链接地址:http://socket.io/blog/native-socket-io-and-android/

android chat demo

在本教程中我们将学习如何创建一个聊天客户端用socket . io Node. JS做为聊天服务器 ,我们的 nativate安卓客户端 ! 如果你想直接跳转到代码,它在 GitHub 。 否则,继续读下去!

#介绍

跟随,首先克隆存储库: socket.io-android-chat 

应用程序具有以下特点:

  • 发送消息到所有用户加入到房间。
  • 每个用户加入或者离开时通知。
  • 一个用户开始输入信息时通知。

Socket.IO提供了一个面向事件的API,可以在所有网络、设备和浏览器。 非常健壮的(甚至作品背后的公司代理!)和高性能,这是非常适合多人游戏或实时通信。

#安装的依赖关系

第一步是安装Java Socket。 输入输出端与 Gradle 

对于这个应用程序,我们将依赖项添加到 build.gradle :

// app/build.gradle
dependencies {
    ...
    compile 'com.github.nkzawa:socket.io-client:0.3.0'
}

我们必须记住添加网络许可 AndroidManifest.xml 

<!-- app/AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

现在我们可以在android上使用socket.IO!

#在Activity和Fragment使用Socket

首先,我们必须初始化Socket.io 的一个新实例。如下:

import com.github.nkzawa.socketio.client.IO;
import com.github.nkzawa.socketio.client.Socket;

private Socket mSocket;
{
    try {
        mSocket = IO.socket("http://chat.socket.io");
    } catch (URISyntaxException e) {}
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mSocket.connect();
}

IO.socket() 返回Socket http://chat.socket.io 使用默认选项。 注意,方法缓存结果,所以你可以得到一个相同的 Scocket从任何Activity或Fragment实例的url。

我们显式调用 connect() 在这里建立连接(与JavaScript客户端)。 在这个程序中,我们使用 onCreate 生命周期回调,但它实际上取决于您的应用程序。

#发射事件

发送数据看起来如下。 在这种情况下,我们发送一个字符串,但你也可以做JSON数据 org.json 包,甚至还支持二进制数据!

private EditText mInputMessageView;

private void attemptSend() {
    String message = mInputMessageView.getText().toString().trim();
    if (TextUtils.isEmpty(message)) {
        return;
    }

    mInputMessageView.setText("");
    mSocket.emit("new message", message);
}

#监听事件

就像我前面提到的,Socket.IO 是 双向的 ,这意味着我们可以向服务器发送事件,但也随时在通信服务器可以发送事件。

然后我们可以Socket监听事件 onCreate 生命周期回调。

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    mSocket.on("new message", onNewMessage);
    mSocket.connect();
}

我们监听 new message 事件从其他用户接收消息。

import com.github.nkzawa.emitter.Emitter;

private Emitter.Listener onNewMessage = new Emitter.Listener() {
    @Override
    public void call(final Object.. args) {
        getActivity().runOnUiThread(new Runnable() {
            @Override
            public void run() {
                JSONObject data = (JSONObject) args[0];
                String username;
                String message;
                try {
                    username = data.getString("username");
                    message = data.getString("message");
                } catch (JSONException e) {
                    return;
                }

                // add the message to view
                addMessage(username, message);
            }
        });
    }
};

这就是 onNewMessage 的样子。 一个侦听器的一个实例 Emitter.Listener ,必须实施 call 方法。 你会注意到里面的call()包装的 Activity# runOnUiThread() ,这是因为回调总是另一个线程从Android UI线程里面调用,因此我们必须确保将消息添加到UI线程的视图上。

#套接字状态管理

因为一个Android活动有自己的生命周期,我们也应该仔细管理套接字的状态,以避免内存泄漏等问题。 在这个程序中,我们将关闭套接字连接,删除所有的听众 onDestroy 回调的活动。

@Override
public void onDestroy() {
    super.onDestroy();

    mSocket.disconnect();
    mSocket.off("new message", onNewMessage);
}

调用 off() 删除new message()的侦听器事件。

#进一步的阅读

如果你想探索更多的,我建议你看看:

  • 这个程序的其他特征。他们只是实现了 发出() 在() 和 () 
  • 套接字的细节。 IO Java客户机。 它支持JS客户机的所有特性。
  • 许多其他伟大的套接字。 IO实现创建的社区!
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React Native可以使用socket.io-client来创建基于WebSocket的实时应用程序。 以下是使用socket.io-client在React Native中创建基本实时聊天应用程序的步骤: 1. 首先,安装socket.io-client库: ``` npm install socket.io-client --save ``` 2. 在需要使用socket.io-client的组件中导入: ``` import io from 'socket.io-client'; ``` 3. 创建一个socket对象并连接到服务器: ``` const socket = io('http://localhost:3000'); ``` 可以将服务器URL更改为实际的服务器URL。 4. 监听服务器的事件: ``` socket.on('connect', () => { console.log('Connected to server'); }); socket.on('message', (message) => { console.log('Received message:', message); }); ``` 可以监听任何服务器定义的事件。 5. 发送消息到服务器: ``` socket.emit('message', 'Hello server'); ``` 可以发送任何类型的数据。 这是一个基本的实时聊天应用程序的示例代码: ``` import React from 'react'; import { View, Text, TextInput, Button } from 'react-native'; import io from 'socket.io-client'; export default class Chat extends React.Component { constructor(props) { super(props); this.state = { messages: [], message: '', }; this.socket = io('http://localhost:3000'); this.socket.on('connect', () => { console.log('Connected to server'); }); this.socket.on('message', (message) => { console.log('Received message:', message); this.setState({ messages: [...this.state.messages, message] }); }); } sendMessage = () => { const { message } = this.state; this.socket.emit('message', message); this.setState({ message: '' }); } render() { const { messages, message } = this.state; return ( <View> <View> {messages.map((message, index) => ( <Text key={index}>{message}</Text> ))} </View> <View> <TextInput value={message} onChangeText={(text) => this.setState({ message: text })} /> <Button title="Send" onPress={this.sendMessage} /> </View> </View> ); } } ``` 这个例子中,我们创建了一个WebSocket连接到服务器,并监听服务器的消息事件。我们还创建了一个UI,可以输入并发送消息到服务器。每当我们接收到服务器的消息时,我们将消息添加到UI中。 这是一个基本的介绍,你可以根据你的需求进行更改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值