注意是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. 2021年Web开发的7大趋势

    技术发展日新月异,所以 Web 开发人员也需要及时了解行业最新的发展趋势. 全球有超过 17.4 亿个网站.在每一个细分领域都有无数企业争夺搜索引擎的排名前列位置.开发人员应该了解和发现更多创新的 W ...

  2. Spring Cloud 2020.0.1 正式发布!真是头疼。。。

    上一篇:Spring Cloud 2020.0.0 正式发布,全新颠覆性版本! 号外!号外!号外! Spring Cloud 2020.0.0 在去年 12 月底,赶在一年的尾巴最后几天仓促发布了,时 ...

  3. C语言中使用类似awk的功能

    awk实在是太强大了, 非常复杂的任务,几行代码就可以解决, awk经常需要用到, 但是在c语言里面, 调用system不太优雅, 能不能直接在c语言中直接调用呢,简单实现了一些功能, 但大多数情况, ...

  4. (万字好文)Dubbo服务熔断与降级的深入讲解&代码实战

    原文链接:(万字好文)Dubbo服务熔断与降级的深入讲解&代码实战 一.Dubbo服务降级实战 1 mock 机制 谈到服务降级,Dubbo 本身就提供了服务降级的机制:而 Dubbo 的服务 ...

  5. loj10161 叶子的颜色

    CQOI 2009 给一棵有 mm 个节点的无根树,你可以选择一个度数大于 11 的节点作为根,然后给一些节点(根.内部节点.叶子均可)着以黑色或白色.你的着色方案应保证根节点到各叶子节点的简单路径上 ...

  6. SpringMVC听课笔记(十:处理JSON: 使用HttpMessageConverter)

    1. 处理JSON 2. 原理 流程图 3. 看个应用吧 -- 上传 ①jsp ②handler -- 下载 ① jsp ② handler

  7. Vue技术点整理-Vuex

    什么是Vuex? 1,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 2,每一个 Vuex ...

  8. java 验证表单工具类,史上最全

    package com.wiker.utils; import java.util.regex.*; /** * * @version 1.0 * @author wiker * @since JDK ...

  9. Object类的常见方法总结

    ♧ Object类是比较特殊的类,它是所有类的父类.主要提供了11个方法(JDK 1.8为例): /** * native方法,用于返回当前运行时对象的Class对象,使用final关键字修饰,子类不 ...

  10. javascript脚本何时会被执行

    javascript脚本可以嵌入在html内的任意地方,但它何时被调用呢?当浏览器打开HTML文件后,会直接运行不是声明函数的脚本或通过事件调用脚本函数,下面分析这几种情况. 1.浏览器在打开页面时执 ...