flutter bloc实现聊天

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:web_socket_channel/web_socket_channel.dart';


void main() {
  runApp(const MyApp());
}
//消息状态
class MessageState{
  String type;
  String? content;
  int? userId;
  int? messageCount;
  static List<MessageState> states=[];
  MessageState({required this.type, this.content, this.userId, this.messageCount});
}
//消息事件

class MessageEvent{
  String message;
  MessageEvent({required this.message});
}
//接收消息事件
class ReceiveMessageEvent extends MessageEvent{
  ReceiveMessageEvent({required super.message});
}
//发送消息事件
class SendMessageEvent extends MessageEvent{
  SendMessageEvent({required super.message});
}

class MessageBloc extends Bloc<MessageEvent,MessageState>{
  MessageBloc() : super(MessageState(type: 'init')) {
    //1. 初始化连接
    WebSocketChannel channel = WebSocketChannel.connect(Uri.parse('ws://localhost:1888/chat'));
    //2. 监听消息
    channel.stream.listen((message) {
      //2.1 将监听到的消息通过event通知bloc
      add(ReceiveMessageEvent(message: message));
    });
    //3. 发送消息事件注册
    on<SendMessageEvent>((event, emit) {
      channel.sink.add(event.message);
    });
    //4. 接收消息事件注册
    on<ReceiveMessageEvent>((event, emit) {
      var msg = jsonDecode(event.message);
      if(msg['type']=='system') {
        emit(MessageState(type: msg['type'], content: msg['content']));
      } else if(msg['type']=='user') {
        MessageState state=MessageState(type: msg['type'],  userId: msg['userId'],content: msg['content'], messageCount: msg['messageCount']);
        emit(state);
        MessageState.states.add(state);
      }
    });
  }
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Message App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BlocProvider(
        create: (context) => MessageBloc(),
        child: MessagePage(),
      )
    );
  }
}
class MessagePage extends StatelessWidget {
  final TextEditingController msgInputController=TextEditingController();

  MessagePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Message App'),
      ),
      body: BlocBuilder<MessageBloc, MessageState>(
        builder: (context, state) {
          if (state.type=='init') {
            return const CircularProgressIndicator();
          }
          return buildResult(context, state);
        },
      ),
    );
  }
  Widget buildResult(BuildContext context, MessageState state){

    return Column(
      children: [
        // 发送消息
        Row(
          children: [
            Expanded(child: TextField(controller: msgInputController,maxLines: 3,minLines: 1,)),
            ElevatedButton(onPressed: () {
              context.read<MessageBloc>().add(SendMessageEvent(message: msgInputController.text));
            }, child: const Text("发送")),

          ]
        ),
        // 系统消息栏红点
        Container(
          alignment: Alignment.centerRight,
          padding: const EdgeInsets.all(16),
          child: state.type == 'system' ? Text("${state.content} ")  : Container(),
        ),

        // 用户列表
        Expanded(
          child: ListView.builder(
            itemCount: MessageState.states.length,
            itemBuilder: (context, index) {
              return ListTile(
                  title: Text('User ${MessageState.states[index].userId}'),
                  subtitle: Text("${MessageState.states[index].content}"),
                  trailing: Text('${MessageState.states[index].messageCount}', style: const TextStyle(color: Colors.red))
              );
            },
          ),
        ),
      ],
    );
  }
}

java websocket实现

import java.io.IOException;
import java.util.concurrent.TimeUnit;

import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
@Component
public class MessageRouter extends TextWebSocketHandler{
	@Override
	public void afterConnectionEstablished(WebSocketSession session) throws Exception {

		sendHello(session);
		
	}
	void sendHello(WebSocketSession session) {
		new Thread(()->{
			for(int i=0;i<100;i++) {
				try {
				JSONObject sj=new JSONObject();
				sj.put("type", "system");
				sj.put("content", "system content");
				JSONObject uj=new JSONObject();
				uj.put("type", "user");
				uj.put("userId", 2010);
				uj.put("messageCount",32);
				uj.put("content", "聊天 content1");
				
				
					session.sendMessage(new TextMessage(sj.toJSONString()));
					session.sendMessage(new TextMessage(uj.toJSONString()));
					uj.put("userId", 2110);
					uj.put("content", "聊天 content2");
					uj.put("messageCount",132);
					session.sendMessage(new TextMessage(uj.toJSONString()));
					sj.put("content", "system content2");
					session.sendMessage(new TextMessage(sj.toJSONString()));
					TimeUnit.SECONDS.sleep(2);
				} catch (IOException e) {
					e.printStackTrace();
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
			}
			
		}).start();
	}

	@Override
	protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值