volley+Express实现简单的客户端服务器通信

Posted 2022-12-13 碎格子

最近在补一些网络的东西，所以闲来无聊，就用android的Volley和Node.js的Express简单的实现客户端和服务器的通信。
由于楼主时间比较紧，在这里就简单的说一下实现步骤，等有时间楼主再补充详细的~
首先我们来看看如何用Express搭建服务器：

Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架，为 Web 和移动应用程序提供一组强大的功能。

1.先安装nvm(node version manager):
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.2/install.sh | bash

2.安装 Node.js
$ nvm install 0.12

3.测试是否安装成功
$ node

在安装完node之后，我们需要创建一个Express应用，在创建之前，需要确定是否安装了npm，如果没有安装npm请看第四步，如果已经安装了npm可以跳过接下来的这步：

4.安装npm
$ curl http://npmjs.org/install.sh | sudo sh

5.创建Express应用目录：
$ mkdir TestDir && cd TestDir

6.安装express，这里是安装的淘宝镜像
$ npm install express –registry=https://registry.npm.taobao.org

7.创建一个js文件
$ touch app.js

8.编辑app.js
$ vim app.js

敲上如下代码

var express = require('express');
var app = express();
app.get('/GetName', function (req, res) 
  res.send('suigezi');
);
app.get('/GetAge',function (req, res)
  res.send('22岁');
);
app.listen(3000, function () 
  console.log('app is listening at port 3000');
);

9.运行js文件
$ node app.js

tips: 测试express是否安装成功
$ ls node_modules

至此，我们的服务器就跑起来了啦啦啦~

Tip：'/GetName'和'/GetAge'是楼主定义在客户端的方法，后面部分会有客户端的实现。

下面是Android客户端的实现：
实现方式是由我们的Volley来完成，首先我们在我们的gradle文件里添加volley库：

compile ‘com.mcxiaoke.volley:library:1.0.6’

然后我们看具体java代码的实现：

public class MainActivity extends AppCompatActivity 
    interface Listener 
        void response(String string);
    
    RequestQueue mQueue;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final Button btn1 = (Button) findViewById(R.id.btn1);
        final Button btn2 = (Button) findViewById(R.id.btn2);
        final TextView textView = (TextView) findViewById(R.id.textView);
        mQueue = Volley.newRequestQueue(this);

        btn1.setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View v) 
                btn1.setEnabled(false);
      addRequest("http://192.168.1.119:3000/GetName", new Listener() 
                    @Override
                    public void response(String response) 
                        textView.setText(response);
                        btn1.setEnabled(true);
                    
                );
            
        );

        btn2.setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View v) 
                btn2.setEnabled(false);
          addRequest("http://192.168.1.119:3000/GetAge", new Listener() 
                    @Override
                    public void response(String string) 
                        textView.setText(string);
                        btn2.setEnabled(true);
                    
                );
            
        );
    

    private void addRequest(String url, final Listener listener) 
        final StringRequest stringRequest2 = new StringRequest(url,new Response.Listener<String>() 
                    @Override
                    public void onResponse(String response) 
                        if (response != null) 
                            listener.response(response);
                        
                    
                , new Response.ErrorListener() 
                    @Override
                    public void onErrorResponse(VolleyError error) 
            
        );
        mQueue.add(stringRequest2);
    

再来看看layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.pets.copy.MainActivity">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Get Name" />
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Get Age" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Tips:
http://192.168.1.119 这个是楼主的IP地址，在实际应用中应该换成自己本机IP地址。
要请求网络必须在AndroidManifest.xml文件里添加权限

<uses-permission android:name="android.permission.INTERNET" />

我们的效果图，界面略丑（捂脸），大家将就看着吧

这里的请求用的Get方法请求，如果有需要也可以用Post方法，而服务器则是返回String简单数据类型来实现，本来楼主还打算加一个数据库构成一个完整的小型系统，但是由于楼主真滴真滴比较忙，所以数据库暂时放置一下~不过楼主一定会补上来的~

至此，我们的客户端和服务器的简单通信就实现了，爱折腾的朋友也可以在此基础上增加各种自己需要的实现。