注意是WebSockets而不是socket.io

install

dependencies:
web_socket_channel:

demo

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:web_socket_channel/io.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
} class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
} class _HomePageState extends State<HomePage> {
final channel = IOWebSocketChannel.connect('ws://192.168.0.101:8080'); @override
void dispose() {
channel.sink.close();
super.dispose();
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: StreamBuilder(
stream: channel.stream,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.active) {
print(snapshot.data); // {"event":"events","data":"hello i'm Nestjs"}
return Container(
width: double.infinity,
height: 200,
child: Center(
child: Text('${snapshot.data}'),
),
);
}
return SizedBox();
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: _sendMessage,
tooltip: 'Send message',
child: Icon(Icons.send),
), //
);
} /// 向服务器发送数据
void _sendMessage() {
print('send event!');
channel.sink.add(
jsonEncode(
{
"event": 'events',
'data': 'Hi i\'m Flutter',
},
),
);
}
}

server

这里使用Nestjs

events.gateway.ts

import {
SubscribeMessage,
WebSocketGateway,
WebSocketServer,
WsResponse,
} from '@nestjs/websockets';
import { of, Observable } from 'rxjs';
import { Server } from 'ws'; @WebSocketGateway(8080)
export class EventsGateway {
@WebSocketServer()
server: Server; @SubscribeMessage('events')
onEvent(client: any, data: any): Observable<WsResponse<string>> {
console.log(data); // Hi i'm Flutter
return of({ event: 'events', data: "hello i'm Nestjs" });
}
}

Flutter使用WebSockets的更多相关文章

  1. html5 Websockets development guidance

    1. WebSockets -- full-duplex communication The main HTML5 pillars include Markup, CSS3, and JavaScri ...

  2. 使用wireshark抓包分析浏览器无法建立WebSocket连接的问题(server为Alchemy WebSockets组件)

    工作时使用了Websocket技术,在使用的过程中发现,浏览器(Chrome)升级后可能会导致Websocket不可用,更换浏览器后可以正常使用. 近日偶尔一次在本地调试,发现使用相同版本的Chrom ...

  3. HTML5之 WebSockets

    ------- 新的网络连接技术 - Web-Sockets 持续连接数据流 全双工工作方式 http补充品而非替代品 - 应用场景 聊天室 股票显示 在线游戏(尤为突出) - 2byte的通信 1b ...

  4. Ratchet(WebSockets for PHP)的官方TUTORIALS 的实践

    前几天稍微看了一下Ratchet,并且实践了一下它官方例子.所以现在就将实践的过程记录下来. 在具体实践之前先将Ratchet是什么东东,要先说明一下.以下的英文是从官方copy过来的 Ratchet ...

  5. Why SignalR does not use WebSockets?

    Why SignalR does not use WebSockets?   As you probably know SignalR supports multiple transports. Th ...

  6. SSE && WebSockets

    SSE && WebSockets 参考 http://www.bitscn.com/school/HTMLCSS/201402/194940.html WebSockets 定义了一 ...

  7. iOS开展-clang: error: unknown argument: &#39;-websockets&#39;解决方案

    问题: 昨天莫名其妙Xcode自己主动升级,那么今天之前执行project什么时候,不知怎的,他们都获得了. 错误内容: clang: error: unknown argument: '-webso ...

  8. HTML5分析实战WebSockets基本介绍

    HTML5 WebSockets规范定义了API,同意web使用页面WebSockets与远程主机协议的双向交流. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络.HTML5 We ...

  9. HTML5分析实战WebSockets一个简短的引论

    HTML5 WebSockets规范定义了API,同意web页面使用WebSockets与远程主机协议的双向通信. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络. HTML5 W ...

随机推荐

  1. .NET5 它来了!微软大一统时代来临!

    今天双11,Microsoft released.NET 5(在他们的开发博客上同时发布).新版本的重点是改进.NET Core 3.1: 更小的单文件应用程序.对 Windows ARM64的支持以 ...

  2. 洛谷P4127

    Description 给出两个数 \(a\),\(b\) ,求出 \([a,b]\) 中各位数字之和能整除原数的数的个数 Solution 设 \(f[i][j][k][q]\) 表示 枚举到第 i ...

  3. Java并发练习

    1.按顺序打印ABC 三个线程,每个线程分别打印A,B,C各十次,现在要求按顺序输出A,B,C package concurrency; import java.util.concurrent.Exe ...

  4. Web信息收集-目标扫描-Nmap

    Web信息收集-目标扫描-Nmap 一.Nmap简介 二.扫描示例 使用主机名扫描: 使用IP地址扫描: 扫描多台主机: 扫描整个子网 使用IP地址的最后一个字节扫描多台服务器 从一个文件中扫描主机列 ...

  5. CCF-最优配餐(BFS)

    最优配餐   问题描述 栋栋最近开了一家餐饮连锁店,提供外卖服务.随着连锁店越来越多,怎么合理的给客户送餐成为了一个急需解决的问题.栋栋的连锁店所在的区域可以看成是一个n×n的方格图(如下图所示),方 ...

  6. xss原理及简单介绍

    XSS简单介绍-Web攻击 一 ·基础介绍 xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/修改/删 ...

  7. 小白搭建WNMP详细教程---MYSQL安装与设置

    MYSQL的安装请参考WAMP中的mysql的安装教程,两者是一样的. https://www.cnblogs.com/missbye/p/12050312.html

  8. ness使用-漏扫

    1.登录nessus后,会自动弹出目标输入弹框: 输入目标IP,可通过CIDR表示法(192.168.0.0/80),范围(192.168.0.1-192.168.0.255),或逗号分隔(192.1 ...

  9. 一文弄懂-《Scalable IO In Java》

    目录 一. <Scalable IO In Java> 是什么? 二. IO架构的演变历程 1. Classic Service Designs 经典服务模型 2. Event-drive ...

  10. indexedDB数据库的使用

    <!DOCTYPE html> <html> <head> <title>indexedDB数据库的使用</title> <meta ...