【第21篇博客】树莓派-服务器端-nodejs 和 主机-客户端-flutter 进行socket.io通信

如何创建一个nodejs项目

https://www.pianshen.com/article/27061493784/

运行命令`
`npm install -g express

树莓派上使用nodejs进行socket.io收发信息

服务器端socketServerTest.js文件:

const io = require("socket.io")(3003);

io.on("connection", socket => {
    console.log('Connected')
    // either with send()
    socket.send("Hello!");

    // or with emit() and custom event names
    socket.emit("greetings", "Hey!", { "ms": "jane" }, Buffer.from([4, 3, 3, 1]));

    // handle the event sent with socket.send()
    socket.on("message", (data) => {
        console.log(data);
    });

    // handle the event sent with socket.emit()
    socket.on("salutations", (elem1, elem2, elem3) => {
        console.log(elem1, elem2, elem3);
    });
});

客户端socketClientTest.js文件

const io = require("socket.io-client");


const socket = new io("http://10.0.1.83:3003");


socket.on("connect", () => {
    // either with send()
    socket.send("Hello!");

    // or with emit() and custom event names
    socket.emit("salutations", "Hello!", { "mr": "john" }, Uint8Array.from([1, 2, 3, 4]));
    console.log('hhhhh');
});

// handle the event sent with socket.send()
socket.on("message", data => {
    console.log(data);
});

// handle the event sent with socket.emit()
socket.on("greetings", (elem1, elem2, elem3) => {
    console.log(elem1, elem2, elem3);
});

现在可以使用flutter做客户端连接

flutter做客户端使用socket.io

https://pub.dev/packages/socket_io_client

该网页有几个简单的示例程序，如dart和flutter下的server端和client端。

这里遇到了几个坑点：

坑是说自己坑…，其实文档上都写了…，刚开始自己没注意。

意思是对应于flutter下的版本v1的socket.io-client对应的Socket.io Sever的版本为v2，而npm package下的socket.io的版本已经到了v4了，一味追求最新版会导致客户端不能正常连上。

因此在树莓派下的nodejs服务器端，得使用较低版本的v2.4.1的socket.io package.

以上是第一个坑点，版本问题。

第二个问题是flutter客户端的程序。

以前用chrome的web程序运行没有问题，

Socket socket = io('http://10.0.1.83:3002');

但在windows下的desktop程序运行连不上，文档中如此说道：

需要改成

Socket socket = io(
     'http://10.0.1.83:3002',
     OptionBuilder().setTransports(['websocket']) // for Flutter or Dart VM
         .build());

就可以连接服务器端了

flutter客户端代码为：

class WeatherCard extends StatefulWidget {
  @override
  _WeatherCardState createState() => _WeatherCardState();
}

class _WeatherCardState extends State<WeatherCard> {
  Socket socket = io(
      'http://10.0.1.83:3002',
      OptionBuilder().setTransports(['websocket']) // for Flutter or Dart VM
          .build());
  void closeDialogHandler(_, Socket socket, openDialogHandler) {
    Navigator.of(context).pop();
    socket.off('closeDialog');
    socket.on(
        'openDialog', (_) => openDialogHandler(_, socket, closeDialogHandler));
  }

  void openDialogHandler(_, Socket socket, closeDialogHandler) {
    _showMyMaterialDialog();
    socket.off('openDialog');
    socket.on(
        'closeDialog', (_) => closeDialogHandler(_, socket, openDialogHandler));
  }

  @override
  void initState() {
    super.initState();
    loadJson();

    socket.onConnect((_) {
      print('socket.io connect');
      // socket.emit('msg', 'test'); //客户端发
    });
    socket.onConnectError((_) {
      print('onConnectError' + _);
    });
    socket.onConnectTimeout((_) {
      print('onConnectTimeout' + _);
    });
    socket.onError((_) {
      print('onError' + _);
    });

    socket.on(
        'openDialog', (_) => openDialogHandler(_, socket, closeDialogHandler));
    socket.onDisconnect((_) => print('disconnect'));
    socket.on('fromServer', (_) => print(_));
  }