1. Easy Talking!! 網路聊天室 組員 : 4970E002 劉浩文 4970E074 程均勤 4970E055 陳典杰

2. 程式功能說明 我們製作一個網路 1 對 1 聊天的聊天室。 利用標籤等功能，美化聊天室的外觀，並利用按 鈕功能，使聊天室的功能更多。 能改變輸入與輸出文字的顏色，並且可以改變背 景的顏色，在視窗右上放皆有可愛的圖片。 附加「清除」與「傳送」按鈕，讓習慣使用滑鼠 的人使用。 Server 與 Client ，兩人的通關密碼設定相同的值， Client 取得 Server 的 IP Address 之後，按下呼叫鈕， 兩人若連線成功便可開始交談。

3. 程式畫面（ Server ）

4. 程式畫面（ Client ）

6. 程式碼說明 紅色部分為我們新增的部份 黑色部分為原程式部份 藍色為程式說明 package onlyfun.caterpillar.chat; import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.io.*; public class EasyTalkClientUI extends JFrame { private Container container; private JLabel label; private JTextField nickNameTextField, serverAddrTextField, serverPortTextField; private JButton connectToServerBtn;

7. private JButton textred; private JButton textorange; private JButton textyellow; ／／新增多個按鈕元件 private JButton textgreen; private JButton textblue; private JButton textwhite; private JButton textblack; private JButton textgred; private JButton textgorange; private JButton textgyellow; private JButton textggreen; private JButton textgblue; private JButton textgwhite; private JButton textgblack; private JButton deliver; private JButton rewrite;

8. private JTextArea messageTextArea, typeInTextArea; private EasyTalkClient chatClient; public EasyTalkClientUI() { super(“Easy Talking”); ／／改變視窗名稱 setUpUIComponent(); setUpEventListener(); setVisible(true);} private void setUpUIComponent() { setSize(600, 550); ／／改變視窗大小 this.setResizable(false); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); container = getContentPane(); JLabel label1 = new JLabel( ／／增加標籤放入可愛的圖片 new ImageIcon("icons/IconLblDisplay.png")); JLabel label2 = new JLabel( new ImageIcon("icons/IconClientID.png")); JPanel panel = new JPanel();

9. panel.setBorder(BorderFactory.createTitledBorder(“EasyTalking“)); ／／改變名稱 panel.setLayout(new FlowLayout(FlowLayout.LEFT)); panel.add(new JLabel(“ 暱稱 ”)); ／／改變名稱 panel.add(nickNameTextField = new JTextField(5)); panel.add(new JLabel("IP Address")); panel.add(serverAddrTextField = new JTextField(10)); panel.add(new JLabel(“ 通關密碼 ”)); ／／改變名稱 panel.add(serverPortTextField = new JTextField(5)); panel.add(connectToServerBtn = new JButton(" 呼叫 ")); panel.add(label2); panel.add(label1); messageTextArea = new JTextArea(13, 50); messageTextArea.setLineWrap(true); messageTextArea.setWrapStyleWord(true); messageTextArea.setEditable(false); panel.add(new JScrollPane(messageTextArea));

10. typeInTextArea = new JTextArea(3, 50); typeInTextArea.setLineWrap(true); typeInTextArea.setEditable(false); panel.add(new JLabel(“ 請選擇喜歡的文字顏色： ”)); ／／增加標籤以解釋按鈕擺放位置 panel.add(textred = new JButton(" 紅 ")); panel.add(textorange = new JButton(“ 橙 ”)); ／／多個改變文字顏色按鈕擺放位置 panel.add(textyellow = new JButton(" 黃 ")); panel.add(textgreen = new JButton(" 綠 ")); panel.add(textblue = new JButton(" 藍 ")); panel.add(textwhite = new JButton(" 白 ")); panel.add(textblack = new JButton(" 黑 ")); panel.add(new JLabel(“ 請選擇喜歡的背景顏色： ”)); ／／增加標籤以解釋按鈕擺放位置 panel.add(textgred = new JButton(“ 紅 ”)); ／／多個改變背景顏色按鈕擺放位置 panel.add(textgorange = new JButton(" 橙 ")); panel.add(textgyellow = new JButton(" 黃 ")); panel.add(textggreen = new JButton(" 綠 "));

11. panel.add(textgblue = new JButton(" 藍 ")); panel.add(textgwhite = new JButton(" 白 ")); panel.add(textgblack = new JButton(" 黑 ")); panel.add(new JScrollPane(typeInTextArea)); panel.add(deliver = new JButton(“ 傳送 ”)); ／／傳送訊息按鈕擺放位置 panel.add(rewrite = new JButton(“ 重寫 ”)); ／／重寫訊息按鈕擺放位置 container.add(panel); } private void setUpEventListener() { connectToServerBtn.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e) { connectToServerBtn.setEnabled(false); chatClient = new EasyTalkClient(); messageTextArea.append(" 呼叫中...\n");

12. new Thread(new Runnable(){ public void run() { try { chatClient.connectToServer(serverAddrTextField.getText(), Integer.parseInt(serverPortTextField.getText())); messageTextArea.append(nickNameTextField.getText()+" 進入 Easy Talking....\n"); ／／進版畫面 typeInTextArea.setEditable(true); String serverMessage; while((serverMessage = chatClient.getServerMessage()) != null) { messageTextArea.append(serverMessage ); messageTextArea.setCaretPosition(messageTextArea.getText().lengt()); }} catch(IOException ex) { chatClient.closeConnection(); connectToServerBtn.setEnabled(true); typeInTextArea.setEditable(false);} } }).start(); }} );

13. textred.addActionListener( new ActionListener() { ／／新增改變文字顏色按鈕程式 public void actionPerformed(ActionEvent e) { typeInTextArea.setForeground(Color.red); ／／打字區變紅色 messageTextArea.setForeground(Color.red); ／／訊息區變紅色 }}); textorange.addActionListener( new ActionListener() { ／／新增改變文字顏色按鈕程式 public void actionPerformed(ActionEvent e) {typeInTextArea.setForeground(Color.orange); messageTextArea.setForeground(Color.orange); }}); textyellow.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e) { ／／新增改變文字顏色按鈕程式 typeInTextArea.setForeground(Color.yellow); messageTextArea.setForeground(Color.yellow); }});

14. textgreen.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e) { typeInTextArea.setForeground(Color.green); ／／新增改變文字顏色按鈕程式 messageTextArea.setForeground(Color.green); }}); textblue.addActionListener( new ActionListener() { ／／新增改變文字顏色按鈕程式 public void actionPerformed(ActionEvent e) { typeInTextArea.setForeground(Color.blue); messageTextArea.setForeground(Color.blue);}}); textwhite.addActionListener( new ActionListener() { ／／新增改變文字顏色按鈕程式 public void actionPerformed(ActionEvent e) { typeInTextArea.setForeground(Color.white); messageTextArea.setForeground(Color.white); }});

15. textblack.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e) { ／／ 新增改變文字顏色按鈕程式 typeInTextArea.setForeground(Color.black); messageTextArea.setForeground(Color.black); }}); textgred.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent e) { messageTextArea.setBackground(Color.red); ／／ 訊息區背景變紅色 }}); textgorange.addActionListener( ／／ 新增改變背景顏色按鈕程式 new ActionListener() { public void actionPerformed(ActionEvent e){messageTextArea.setBackground(Color.orange); }});

16. textgyellow.addActionListener( new ActionListener() { ／／新增改變背景顏色按鈕程式 public void actionPerformed(ActionEvent e){ messageTextArea.setBackground(Color.yellow); }}); textggreen.addActionListener( new ActionListener() { ／／新增改變背景顏色按鈕程式 public void actionPerformed(ActionEvent e){ messageTextArea.setBackground(Color.green); }}); textgblue.addActionListener( new ActionListener() { ／／新增改變背景顏色按鈕程式 public void actionPerformed(ActionEvent e) { messageTextArea.setBackground(Color.blue); }});

17. textgwhite.addActionListener( new ActionListener() { ／／新增改變背景顏色按鈕程式 public void actionPerformed(ActionEvent e) { messageTextArea.setBackground(Color.white); }}); textgblack.addActionListener( new ActionListener() { ／／新增改變背景顏色按鈕程式 public void actionPerformed(ActionEvent e){messageTextArea.setBackground(Color.black); }}); typeInTextArea.addKeyListener( new KeyListener() { public void keyPressed(KeyEvent e) {} public void keyTyped(KeyEvent e) {} public void keyReleased(KeyEvent e) { if(e.getKeyCode() == KeyEvent.VK_ENTER) {

18. String message = nickNameTextField.getText() + " : " + typeInTextArea.getText()+ " \n "; typeInTextArea.setText(""); messageTextArea.append(message); messageTextArea.setCaretPosition(messageTextArea.getText().length()); chatClient.sendMessageToServer(message.replace('\n', ' ')); }}}); deliver.addActionListener( ／／新增傳送訊息按鈕程式 new ActionListener() { public void actionPerformed(ActionEvent e) { String message = nickNameTextField.getText() + " : " + typeInTextArea.getText()+ " \n "; typeInTextArea.setText(""); messageTextArea.append(message); messageTextArea.setCaretPosition(messageTextArea.getText().length()); chatClient.sendMessageToServer(message.replace('\n', ' ')); }});

19. rewrite.addActionListener( ／／新增重寫訊息按鈕程式 new ActionListener() { public void actionPerformed(ActionEvent e) { typeInTextArea.setText(""); } ); } public static void main(String[] args) { new EasyTalkClientUI(); }

20. 工作分配 程式撰寫： ( 文字顏色 ) 劉浩文 ( 背景顏色 ) 陳典杰 ( 插入圖片 ) 劉浩文 ( 按鈕 ) 陳典杰 ( 標籤說明 ) 劉浩文 簡報檔製作：程均勤