JavaGUI模仿QQ聊天功能完整版-编程学习网

本文实例为大家分享了JavaGUI模仿QQ聊天功能完整代码，供大家参考，具体内容如下

ClientForm代码：


package GUISocket.chat.Client;
import javax.swing.JFrame;
import javax.swing.JPanel;
import java.awt.EventQueue;
 
import javax.swing.JLabel;
import javax.swing.JList;
import javax.swing.JTextField;
import javax.swing.DefaultListModel;
import javax.swing.JButton;
import javax.swing.JTextArea;
import javax.swing.JScrollPane;
import javax.swing.ScrollPaneConstants;
import javax.swing.border.EmptyBorder;
 
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
 
public class ClientForm extends JFrame {
 
 private JPanel contentPane;
 DefaultListModel<String> itemUsers;
 private JTextField textIP;
 private JTextField textPort;
 public JTextField textUser;
 public JTextArea textLog;
 public JList listUser;
 public JTextArea textSend ;
 public static void main(String[] args) {
  EventQueue.invokeLater(new Runnable() {
   public void run() {
    try {
     ClientForm frame = new ClientForm();
     frame.setVisible(true);
     ClientMG.getClientMG().setClientForm(frame);
    } catch (Exception e) {
     e.printStackTrace();
    }
   }
  });
 }
 public ClientForm() {
  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  setBounds(100, 100, 589, 607);
  contentPane = new JPanel();
  contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
  setContentPane(contentPane);
  contentPane.setLayout(null);
  
  JLabel label = new JLabel("配置信息");
  label.setBounds(10, 10, 54, 15);
  contentPane.add(label);
  
  JLabel lblIp = new JLabel("IP");
  lblIp.setBounds(10, 35, 27, 15);
  contentPane.add(lblIp);
  
  textIP = new JTextField();
  textIP.setText("192.168.1.2");
  textIP.setBounds(33, 35, 92, 21);
  contentPane.add(textIP);
  textIP.setColumns(10);
  
  JLabel label_1 = new JLabel("端口");
  label_1.setBounds(137, 35, 38, 15);
  contentPane.add(label_1);
  
  textPort = new JTextField();
  textPort.setText("8900");
  textPort.setBounds(168, 32, 66, 21);
  contentPane.add(textPort);
  textPort.setColumns(10);
  
  JLabel label_2 = new JLabel("用户名");
  label_2.setBounds(255, 38, 54, 15);
  contentPane.add(label_2);
  
  textUser = new JTextField();
  textUser.setBounds(302, 35, 66, 21);
  contentPane.add(textUser);
  textUser.setColumns(10);
  
  JButton LOGIN = new JButton("登录");
  LOGIN.setBounds(395, 34, 66, 23);
  contentPane.add(LOGIN);
  
  JButton btnClose = new JButton("关闭");
  btnClose.addActionListener(new BtnCloseActionListener());
  btnClose.setBounds(480, 31, 71, 23);
  contentPane.add(btnClose);
  
  JPanel panel = new JPanel();
  panel.setBounds(0, 10, 573, 61);
  contentPane.add(panel);
  panel.setLayout(null);
  
  JPanel panel_1 = new JPanel();
  panel_1.setBounds(0, 81, 573, 369);
  contentPane.add(panel_1);
  panel_1.setLayout(null);
  
  JLabel label_3 = new JLabel("聊天记录");
  label_3.setBounds(10, 10, 54, 15);
  panel_1.add(label_3);
  
  JScrollPane scrollPane = new JScrollPane();
  scrollPane.setHorizontalScrollBarPolicy(ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER);
  scrollPane.setBounds(20, 35, 323, 324);
  panel_1.add(scrollPane);
  
  textLog = new JTextArea();
  textLog.setWrapStyleWord(true);
  textLog.setLineWrap(true);
  scrollPane.setViewportView(textLog);
  
  JLabel label_4 = new JLabel("在线用户");
  label_4.setBounds(351, 10, 54, 15);
  panel_1.add(label_4);
  
  JScrollPane scrollPane_1 = new JScrollPane();
  scrollPane_1.setBounds(353, 35, 210, 324);
  panel_1.add(scrollPane_1);
  
  
  this.itemUsers=new DefaultListModel<String>();
  this.listUser=new JList(itemUsers);
  scrollPane_1.setViewportView(this.listUser);
  
  
  JPanel panel_2 = new JPanel();
  panel_2.setBounds(10, 449, 553, 119);
  contentPane.add(panel_2);
  panel_2.setLayout(null);
  
  JLabel label_5 = new JLabel("操作");
  label_5.setBounds(10, 10, 54, 15);
  panel_2.add(label_5);
  
  JScrollPane scrollPane_2 = new JScrollPane();
  scrollPane_2.setBounds(10, 22, 533, 64);
  panel_2.add(scrollPane_2);
  
  textSend = new JTextArea();
  textSend.setWrapStyleWord(true);
  textSend.setLineWrap(true);
  scrollPane_2.setViewportView(textSend);
  
  JButton button_1 = new JButton("群发");
  button_1.addActionListener(new Button_1ActionListener());
  button_1.setBounds(307, 86, 93, 23);
  panel_2.add(button_1);
  
  JButton sendMG = new JButton("发送");
  sendMG.addActionListener(new SendMGActionListener());
  sendMG.setBounds(432, 86, 93, 23);
  panel_2.add(sendMG);
  
  LOGIN.addActionListener(new ActionListener() {
   public void actionPerformed(ActionEvent e) {
    //连接服务器user
    String IP=textIP.getText().trim();
    int port=Integer.parseInt(textPort.getText().trim());
    String user=textUser.getText().trim();
    
    if(ClientMG.getClientMG().Connect(IP,port,user)) {
     ClientMG.getClientMG().setLogTxt("已经连接到服务器");
     
    }
    else {
     ClientMG.getClientMG().setLogTxt("连接服务器失败");
    }
   }
  });
 }
 private class SendMGActionListener implements ActionListener {
  public void actionPerformed(ActionEvent e) {
   
   //发送信息
   //1.获取选择的用户名称
   //2.发送给服务器端含有接收用户信息的交互协议串
   String SenderName=ClientMG.getClientMG().getClientThd().getName();
   String RecName=listUser.getSelectedValue().toString();
   String MSGinfo=textSend.getText().trim();
   
   String sMsg="MSG|"+SenderName+"|"+RecName+"|"+MSGinfo;
   ClientMG.getClientMG().getClientThd().sendMsg(sMsg);
   //将消息内容显示到聊天记录中
   //[发送者]
   //消息内容
   //清空发送消息框
   ClientMG.getClientMG().setLogTxt("[我]：");
   ClientMG.getClientMG().setLogTxt(MSGinfo);
   
   textSend.setText("");
  }
 }
 private class Button_1ActionListener implements ActionListener {
  public void actionPerformed(ActionEvent e) {
   //群发信息
   //1.获取选择的用户名称
   //2.发送给服务器端含有接收用户信息的交互协议串
   //发送到服务器，MSG|SenderName|RecName|MSGInfo
   String SenderName=ClientMG.getClientMG().getClientThd().getName();
   String RecName="ALL";
   String MSGinfo=textSend.getText().trim();
   
   String sMsg="MSG|"+SenderName+"|"+RecName+"|"+MSGinfo;
   ClientMG.getClientMG().getClientThd().sendMsg(sMsg);
   //将消息内容显示到聊天记录中
   //[发送者]
   //消息内容
   //清空发送消息框
   ClientMG.getClientMG().setLogTxt("[我]：");
   ClientMG.getClientMG().setLogTxt(MSGinfo);
   
   textSend.setText("");
  }
 }
 private class BtnCloseActionListener implements ActionListener {
  public void actionPerformed(ActionEvent e) {
   //向服务器发送线下信息，OFFLINE|username
   String SenderName=ClientMG.getClientMG().getClientThd().getName();
   String str="OFFLINE|"+SenderName;
   ClientMG.getClientMG().getClientThd().sendMsg(str);
   
   //清空在线用户列表
   ClientMG.getClientMG().clearItem();
   //消息记录中显示断开连接
   ClientMG.getClientMG().setLogTxt("已经断开连接");
  }
 }
 
 
}

ClientMG代码：


package GUISocket.chat.Client;
 
import java.net.Socket; 
 
public class ClientMG {
 private static final ClientMG clientmg=new ClientMG();
 private ClientMG() {}
 public static ClientMG getClientMG() {
  return clientmg;
 }
 
 private ClientForm clientWin;
 public void setClientForm(ClientForm c) {
  clientWin=c;
 }
 
 public void setLogTxt(String str) {
  clientWin.textLog.append(str+"\r\n");  
 }
 
 public void addItem(String user) {
  
  clientWin.itemUsers.addElement(user);
 }
 
 public void addItems(String[] users) {
  for(int i=0;i<users.length;i++) {
   clientWin.itemUsers.addElement(users[i]);
  }
 
 }
 //所有用户列表清空
 public void clearItem() {
  clientWin.itemUsers.clear();
 }
 //删除一个用户
 public void removeItem(String str) {
  clientWin.itemUsers.removeElement(str);
 }
 
 SocketThread sthd;
 public boolean Connect(String IP,int port,String user) {
  Socket socket=null;
  try {
   socket=new Socket(IP,port);
   sthd=new SocketThread(socket, user);
   sthd.start();
   return true;
  } catch (Exception e) {
   // TODO: handle exception
   e.printStackTrace();
   return false;
  }
 }
 
 public SocketThread getClientThd() {
  return sthd;
 }
}

SocketThread代码：


package GUISocket.chat.Client;
 
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.io.PrintWriter;
import java.net.Socket;
 
public class SocketThread extends Thread{
 BufferedReader br=null;
 PrintWriter pw=null;
 Socket socket=null;
 
 public SocketThread(Socket socket,String user){
  super(user);//登录时用的用户名
  this.socket=socket;
 }
 
 public void run() {
  try {
   br=new BufferedReader(new InputStreamReader(socket.getInputStream(), "UTF-8"));
   pw=new PrintWriter(new BufferedWriter(new OutputStreamWriter(socket.getOutputStream(),"UTF-8")));
   String sLOGIN="LOGIN|"+this.getName();
   sendMsg(sLOGIN);
   
   String str="";
   while((str=br.readLine())!=null) {
    String[] commands=str.split("\\|");
    if(commands[0].equals("USERLISTS")) {//USERLISTS|user1_user2_user3
     String[] sUsers=commands[1].split("\\_");
     ClientMG.getClientMG().addItems(sUsers);
    }
    else if(commands[0].equals("ADD")) {//ADD|UserName
     String sNewUser=commands[1];
     ClientMG.getClientMG().addItem(sNewUser);
    }
    else if(commands[0].equals("MSG")) {//格式 MSG|SenderName|MSGinfo
     String SenderName=commands[1];
     String MSGinfo=commands[2];
     //将消息内容显示到聊天记录中
     //[发送者]
     //消息内容
     ClientMG.getClientMG().setLogTxt("["+SenderName+"]");
     ClientMG.getClientMG().setLogTxt(MSGinfo);
    }
    else if(commands[0].equals("DEL")) {
     //3.处理下线用户信息，DEL|username
     //删除用户列表中的username
     String sUser=commands[1];
     ClientMG.getClientMG().removeItem(sUser);
     ClientMG.getClientMG().setLogTxt(sUser+"下线了。");
    }
    else if(commands[0].equals("CLOSE")) { //CLOSE
     //1.处理CLOSE命令，界面显示服务器关闭
     //2。清空在线用户列表
     ClientMG.getClientMG().clearItem();
     ClientMG.getClientMG().setLogTxt("服务器关闭");
     //3.关闭ClientChat
     break;
    }
    
    //ClientMG.getClientMG().setLogTxt(str);
    
   }
  } catch (Exception e) {
   // TODO: handle exception
   e.printStackTrace();
  }finally {
   try {
    if(pw!=null)
     pw.close();
    if(br!=null)
     br.close();
    if(socket!=null)
     socket.close();
   } catch (Exception e2) {
    // TODO: handle exception
   }
  }
 }
 public void sendMsg(String str) {
  pw.println(str);
  pw.flush();
 }
}

ServerForm代码：


package GUISocket.chat.Server;
import javax.swing.JFrame;
import javax.swing.JPanel;
import java.awt.EventQueue;
 
import javax.swing.JLabel;
import javax.swing.JTextField;
import javax.swing.JButton;
import javax.swing.JTextArea;
import javax.swing.JScrollPane;
import javax.swing.ScrollPaneConstants;
import javax.swing.border.EmptyBorder;
 
 
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
 
public class ServerForm extends JFrame {
 
 
 private JPanel contentPane;
 public JTextArea textLog;
 private JTextField textPort;
 public static void main(String[] args) {
  EventQueue.invokeLater(new Runnable() {
   public void run() {
    try {
     ServerForm frame = new ServerForm();
     frame.setVisible(true);
     ServerMG.getServerMG().setServerForm(frame);
    } catch (Exception e) {
     e.printStackTrace();
    }
   }
  });
 }
 
 public ServerForm() {
  setTitle("多人聊天服务器");
  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  setBounds(100, 100, 510, 566);
  contentPane = new JPanel();
  contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
  setContentPane(contentPane);
  contentPane.setLayout(null);
  
  JLabel lblNewLabel = new JLabel("配置信息");
  lblNewLabel.setBounds(20, 10, 54, 15);
  contentPane.add(lblNewLabel);
  
  JLabel label = new JLabel("端口:");
  label.setBounds(30, 34, 39, 15);
  contentPane.add(label);
  
  textPort = new JTextField();
  textPort.setText("8900");
  textPort.setBounds(65, 31, 66, 21);
  contentPane.add(textPort);
  textPort.setColumns(10);
  
  JButton btnStart = new JButton("开启服务");
  btnStart.addActionListener(new BtnStartActionListener());
  btnStart.setBounds(180, 30, 93, 23);
  contentPane.add(btnStart);
  
  JButton btnClose = new JButton("关闭服务");
  btnClose.addActionListener(new BtnCloseActionListener());
  btnClose.setBounds(325, 30, 93, 23);
  contentPane.add(btnClose);
  
  JPanel panel = new JPanel();
  panel.setBounds(10, 10, 474, 54);
  contentPane.add(panel);
  panel.setLayout(null);
  
  JLabel label_1 = new JLabel("消息记录");
  label_1.setBounds(10, 94, 54, 15);
  contentPane.add(label_1);
  
  JPanel panel_1 = new JPanel();
  panel_1.setBounds(0, 81, 474, 436);
  contentPane.add(panel_1);
  panel_1.setLayout(null);
  
  JScrollPane scrollPane = new JScrollPane();
  scrollPane.setBounds(10, 41, 464, 368);
  panel_1.add(scrollPane);
  scrollPane.setVerticalScrollBarPolicy(ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS);
  
  textLog = new JTextArea();
  textLog.setLineWrap(true);
  textLog.setWrapStyleWord(true);
  scrollPane.setViewportView(textLog);
  
  
  
 }
 private class BtnCloseActionListener implements ActionListener {
  public void actionPerformed(ActionEvent e) {
   
  }
 }
 private class BtnStartActionListener implements ActionListener {
  public void actionPerformed(ActionEvent e) {
   //开启服务
   
   
   int port=Integer.parseInt(textPort.getText().trim());
   
   if(ServerMG.getServerMG().CreateServer(port)) {
 
    ServerMG.getServerMG().setLogTxt("服务器开启...");
   }
   else {
    ServerMG.getServerMG().setLogTxt("服务器开启失败...");
   }
  }
 }
}

ServerListener代码：


package GUISocket.chat.Server;
 
import java.net.ServerSocket;
import java.net.Socket;
 
public class ServerListener extends Thread{
 Socket socket=null;
 ServerSocket server=null;
 public ServerListener(ServerSocket server) {
  this.server=server;
 }
 public void run() {
  try {
   while(true) {
    socket=server.accept();
    ServerMG.getServerMG().setLogTxt("客户端： "+socket);  
    new SocketThread(socket).start();
   }
   
  } catch (Exception e) {
   // TODO: handle exception
   e.printStackTrace();
  }
 }
 
}

ServerMG代码：


package GUISocket.chat.Server;
 
import java.net.ServerSocket;
import java.net.Socket;
import java.util.ArrayList;
 
import javax.swing.JTextArea;
 
public class ServerMG {
 private static final ServerMG servermg=new ServerMG();
 private ServerMG() {}
 public static ServerMG getServerMG() {
  return servermg;
  
 }
 
 //主界面的操作
 private ServerForm serverWin;
 
 //将窗体对象注册到管理类当中
 public void setServerForm(ServerForm s) {
  serverWin=s;
 }
 //设置主界面
 public void setLogTxt(String str) {
  serverWin.textLog.append(str+"\r\n");
 }
 
 private ServerSocket server;
 public boolean CreateServer(int port) {
  try {   
   server=new ServerSocket(port);
   new ServerListener(server).start();
   return true;
  } catch (Exception e) {
   // TODO: handle exception
   e.printStackTrace();
   return false;
  }
 }
 
 public void CloseServer() {
  try {
   
   //1.向所有在线用户发送关闭服务器的信息，CLOSE
   sendClosetoAll();
   //2.遍历Arraylist将其中的每一个ServerChat关闭
   closeAllThread();
   //3.ArrayList要清空
   clearList();
   //4.关闭ServerListener
   //5.关闭ServerSocket
   server.close();
  } catch (Exception e) {
   // TODO: handle exception
   e.printStackTrace();
  }
 }
 
 //ArrayList操作
 ArrayList<SocketThread> a1OnlineList=new ArrayList<>();//存放所有和
 public synchronized void addList(SocketThread sc) {
  //限制重名
  a1OnlineList.add(sc);
 }
 
 public void clearList() {
  a1OnlineList.clear();
 }
 
 public synchronized void removeList(SocketThread sc) {
  for(int i=0;i<a1OnlineList.size();i++) {
   SocketThread s=a1OnlineList.get(i);
   if(s.equals(sc)) {
    a1OnlineList.remove(sc);
    break;
   }
  }
 }
 
 //信息的管理
 public void getOnlineNames(SocketThread sc) {
  //非第1次登录时，得到所有的在线用户
  if(a1OnlineList.size()>0) {
   String sUsers="";//给客户端，USERLISTS|user1_user2_user3
   for(int i=0;i<a1OnlineList.size();i++) {
    SocketThread s=a1OnlineList.get(i);
    sUsers+=s.getName()+"_";
   }
   sc.sendMsg("USERLISTS|"+sUsers);
  }
  
 }
 public void sendNewUsertoAll(SocketThread sc) {
  for(int i=0;i<a1OnlineList.size();i++) {
   SocketThread s=a1OnlineList.get(i);
   s.sendMsg("ADD|"+sc.getName());
  }
 }
 //通过Mame用户名查找目标
 public SocketThread getSocketThreadByName(String sName) {
  for(int i=0;i<a1OnlineList.size();i++) {
   SocketThread s=a1OnlineList.get(i);
   if(s.getName().equals(sName)) {
    return s;
   }
  }
  return null;
 }
 
 //发送给所有人，但是要排除自身
 public void sendMsgtoAll(String sMsg,SocketThread sc) {
  for(int i=0;i<a1OnlineList.size();i++) {
   SocketThread s=a1OnlineList.get(i);
   if(!s.equals(sc)) {
    s.sendMsg(sMsg);
   }
  }
 }
 
 public void sendOfflieUsertoAll(SocketThread sc) {
  //向所有的其他在线用户发送用户下线信息，DE|username
  for(int i=0;i<a1OnlineList.size();i++) {
   SocketThread s=a1OnlineList.get(i);
   if(!s.equals(sc)) {
    s.sendMsg("DEL|"+sc.getName());
   }
  }
 }
 
 public void sendClosetoAll() {
  for(int i=0;i<a1OnlineList.size();i++) {
   SocketThread s=a1OnlineList.get(i);
   s.sendMsg("CLOSE");
  }
 }
 
 public void closeAllThread() {
  for(int i=0;i<a1OnlineList.size();i++) {
   SocketThread s=a1OnlineList.get(i);
   s.closeChat();
  }
 }
 
 
}

SocketThread代码：


package GUISocket.chat.Server;
 
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.io.PrintWriter;
import java.net.Socket;
 
public class SocketThread extends Thread{
 BufferedReader br=null;
 PrintWriter pw=null;
 Socket socket=null;
 public SocketThread(Socket socket) {
  this.socket = socket;
 }
 
 public void run() {
  try {
   br=new BufferedReader(new InputStreamReader(socket.getInputStream(), "UTF-8"));
   pw=new PrintWriter(new BufferedWriter(new OutputStreamWriter(socket.getOutputStream(),"UTF-8")));
   String str="";
   while((str=br.readLine())!=null) {//循环响应客户的发送信息//接受客户端发过来的信息
    String [] commands=str.split("\\|");
    
    if(commands[0].equals("LOGIN")) {//解析登录请求，格式，LOGIN|UserName
     String sUSER=commands[1];
     this.setName(sUSER);//将用户名信息放入Threadname中
     //1.得到所有在线用户信息名称，发回客户端：USERLISTS|user1_user2_user3
     ServerMG.getServerMG().getOnlineNames(this);
     //2.将当前登录用户的信息(用户名),发送给已经在线的其他用户，ADD|userName
     
     ServerMG.getServerMG().sendNewUsertoAll(this);
     //3.将当前登录的Socket信息放入ArrayList中
     ServerMG.getServerMG().addList(this);
     
    }
    else if(commands[0].equals("MSG")) {//格式：MSG|SenderName|RecName|MSGoinfo
     String SenderName=commands[1];
     String RecName=commands[2];
     String MSGinfo=commands[3];
     //群聊
     if(RecName.equals("ALL")) {
      String sMsg="MSG!"+SenderName+"|"+MSGinfo;//格式：MSG|SenderName|MSGinfo
      ServerMG.getServerMG().sendMsgtoAll(sMsg,this);
      ServerMG.getServerMG().setLogTxt(SenderName+"发送信息["+MSGinfo+"]到所有人。");
     }
     //私聊
      else {
       //通过RecName用户名查找，找到目标SocketThread
       SocketThread sc=ServerMG.getServerMG().getSocketThreadByName(RecName);
       if(sc!=null) {
        //目标对象发送信息，MSG|SenderName|MSGinfo
        String sMsg="MSG!"+SenderName+"|"+MSGinfo;
        sc.sendMsg(sMsg);
        
        //写入信息日志
        ServerMG.getServerMG().setLogTxt(SenderName+"发送信息["+MSGinfo+"]到"+RecName);
      }
      
     }
    }
    
    else if(commands[0].equals("OFFLINE")) {
     //1.创建OFFLINE
     String sUser=commands[1];//获取下线的用户名
     //2.向所有的其他在线用户发送用户下线信息，DEL|username
     ServerMG.getServerMG().sendOfflieUsertoAll(this);
     //3.清除ArrayList中的当前用户信息()socketChat
     ServerMG.getServerMG().removeList(this);
     
     //用户下线需后要退出监听用的while循环
     ServerMG.getServerMG().setLogTxt(sUser+"下线了");
     break;
    }
    
   }
  } catch (Exception e) {
   e.printStackTrace();
  }finally {
   try {
    if(pw!=null)
     pw.close();
    if(br!=null)
     br.close();
    if(socket!=null)
     socket.close();
   } catch (Exception e2) {
    // TODO: handle exception
   }
  }
 }
 public void closeChat() {
  try {
   if(pw!=null)
    pw.close();
   if(br!=null)
    br.close();
   if(socket!=null)
    socket.close();
  } catch (Exception e) {
   e.printStackTrace();
  }
 }
 public void sendMsg(String str) {
  pw.println(str);
  pw.flush();
 }
}

运行结果如下：

缺点：只能发单行信息，如发多行，需用到base4.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

文章详情

JavaGUI模仿QQ聊天功能完整版

软考中级精品资料免费领

相关文章

猜你喜欢

JavaGUI模仿QQ聊天功能完整版

JavaGUI如何模仿实现QQ聊天功能

java仿QQ微信聊天室功能的实现

Vue.js如何模仿微信聊天窗口展示组件功能