Flutter使用WebSockets
注意是
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的更多相关文章
- html5 Websockets development guidance
1. WebSockets -- full-duplex communication The main HTML5 pillars include Markup, CSS3, and JavaScri ...
- 使用wireshark抓包分析浏览器无法建立WebSocket连接的问题(server为Alchemy WebSockets组件)
工作时使用了Websocket技术,在使用的过程中发现,浏览器(Chrome)升级后可能会导致Websocket不可用,更换浏览器后可以正常使用. 近日偶尔一次在本地调试,发现使用相同版本的Chrom ...
- HTML5之 WebSockets
------- 新的网络连接技术 - Web-Sockets 持续连接数据流 全双工工作方式 http补充品而非替代品 - 应用场景 聊天室 股票显示 在线游戏(尤为突出) - 2byte的通信 1b ...
- Ratchet(WebSockets for PHP)的官方TUTORIALS 的实践
前几天稍微看了一下Ratchet,并且实践了一下它官方例子.所以现在就将实践的过程记录下来. 在具体实践之前先将Ratchet是什么东东,要先说明一下.以下的英文是从官方copy过来的 Ratchet ...
- Why SignalR does not use WebSockets?
Why SignalR does not use WebSockets? As you probably know SignalR supports multiple transports. Th ...
- SSE && WebSockets
SSE && WebSockets 参考 http://www.bitscn.com/school/HTMLCSS/201402/194940.html WebSockets 定义了一 ...
- iOS开展-clang: error: unknown argument: '-websockets'解决方案
问题: 昨天莫名其妙Xcode自己主动升级,那么今天之前执行project什么时候,不知怎的,他们都获得了. 错误内容: clang: error: unknown argument: '-webso ...
- HTML5分析实战WebSockets基本介绍
HTML5 WebSockets规范定义了API,同意web使用页面WebSockets与远程主机协议的双向交流. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络.HTML5 We ...
- HTML5分析实战WebSockets一个简短的引论
HTML5 WebSockets规范定义了API,同意web页面使用WebSockets与远程主机协议的双向通信. 介绍WebSocket接口,并限定了全双工通信信道,通过套接字网络. HTML5 W ...
随机推荐
- 2021年Web开发的7大趋势
技术发展日新月异,所以 Web 开发人员也需要及时了解行业最新的发展趋势. 全球有超过 17.4 亿个网站.在每一个细分领域都有无数企业争夺搜索引擎的排名前列位置.开发人员应该了解和发现更多创新的 W ...
- Spring Cloud 2020.0.1 正式发布!真是头疼。。。
上一篇:Spring Cloud 2020.0.0 正式发布,全新颠覆性版本! 号外!号外!号外! Spring Cloud 2020.0.0 在去年 12 月底,赶在一年的尾巴最后几天仓促发布了,时 ...
- C语言中使用类似awk的功能
awk实在是太强大了, 非常复杂的任务,几行代码就可以解决, awk经常需要用到, 但是在c语言里面, 调用system不太优雅, 能不能直接在c语言中直接调用呢,简单实现了一些功能, 但大多数情况, ...
- (万字好文)Dubbo服务熔断与降级的深入讲解&代码实战
原文链接:(万字好文)Dubbo服务熔断与降级的深入讲解&代码实战 一.Dubbo服务降级实战 1 mock 机制 谈到服务降级,Dubbo 本身就提供了服务降级的机制:而 Dubbo 的服务 ...
- loj10161 叶子的颜色
CQOI 2009 给一棵有 mm 个节点的无根树,你可以选择一个度数大于 11 的节点作为根,然后给一些节点(根.内部节点.叶子均可)着以黑色或白色.你的着色方案应保证根节点到各叶子节点的简单路径上 ...
- SpringMVC听课笔记(十:处理JSON: 使用HttpMessageConverter)
1. 处理JSON 2. 原理 流程图 3. 看个应用吧 -- 上传 ①jsp ②handler -- 下载 ① jsp ② handler
- Vue技术点整理-Vuex
什么是Vuex? 1,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 2,每一个 Vuex ...
- java 验证表单工具类,史上最全
package com.wiker.utils; import java.util.regex.*; /** * * @version 1.0 * @author wiker * @since JDK ...
- Object类的常见方法总结
♧ Object类是比较特殊的类,它是所有类的父类.主要提供了11个方法(JDK 1.8为例): /** * native方法,用于返回当前运行时对象的Class对象,使用final关键字修饰,子类不 ...
- javascript脚本何时会被执行
javascript脚本可以嵌入在html内的任意地方,但它何时被调用呢?当浏览器打开HTML文件后,会直接运行不是声明函数的脚本或通过事件调用脚本函数,下面分析这几种情况. 1.浏览器在打开页面时执 ...