Tạo ứng dụng chat với WebSocket: Java Server + JavaScript Client

Tạo ứng dụng chat với WebSocket: Java Server + JavaScript Client

(Xem lại: WebSocket là gì? Giới thiệu cấu trúc WebSocket)

(Xem lại: Code ví dụ Java WebSocket: Client JavaScript – Server Java)

Các công nghệ sử dụng:

Tạo Dynamic Web Project

Tạo ứng dụng chat với WebSocket: Java Server + JavaScript Client

Tạo ServerEnpoint

package stackjava.com.websocket2.server;

import java.io.IOException;
import java.util.Collections;
import java.util.HashSet;
import java.util.Set;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint(value = "/chatRoomServer")
public class ChatRoomServerEndpoint {

  static Set<Session> users = Collections.synchronizedSet(new HashSet<>());

  @OnOpen
  public void handleOpen(Session session) {
    users.add(session);
  }

  @OnMessage
  public void handleMessage(String message, Session userSession) throws IOException {
    String username = (String) userSession.getUserProperties().get("username");
    if (username == null) {
      userSession.getUserProperties().put("username", message);
      userSession.getBasicRemote().sendText("System: you are connectd as" + message);
    } else {
      for (Session session : users) {
        session.getBasicRemote().sendText(username + ": " + message);
      }
    }
  }

  @OnClose
  public void handleClose(Session session) {
    users.remove(session);
  }

  @OnError
  public void handleError(Throwable t) {
    t.printStackTrace();
  }

}

Mỗi WebSocket mà client tạo sẽ tương ứng với 1 session.

Set<Session> users sẽ lưu thông tin tất cả các client đã kết nối với server

Khi client gửi message lần đầu, server sẽ lấy đó làm username, message gửi lần thứ 2 sẽ được gửi tới tất cả các client khác.

(Để gửi message riêng cho user nào đó bạn có thể kiểm tra và so sánh username trong session mới gửi, ví dụ gửi message tới user ‘kai’ thì kiểm tra session nào có username = ‘kai’ thì mới gửi)

File view: chạy ở phía client

<!DOCTYPE html>
<html>
<head>
<title>Demo websocket</title>
</head>
<body>	
    <h1>Demo WebSocket</h1>
    <input id="textMessage" type="text" />
    <input onclick="sendMessage()" value="Send Message" type="button" /> <br/><br/>
    
    <textarea id="textAreaMessage" rows="10" cols="50"></textarea>

    <script type="text/javascript">
      var websocket = new WebSocket("ws://localhost:8080/WebSocket2/chatRoomServer");
        websocket.onopen = function(message) {processOpen(message);};
        websocket.onmessage = function(message) {processMessage(message);};
        websocket.onclose = function(message) {processClose(message);};
        websocket.onerror = function(message) {processError(message);};

      function processOpen(message) {
        textAreaMessage.value += "Server connect... \n";
      }
      function processMessage(message) {
        console.log(message);
        textAreaMessage.value += message.data + " \n";
      }
      function processClose(message) {
        textAreaMessage.value += "Server Disconnect... \n";
      }
      function processError(message) {
        textAreaMessage.value += "Error... " + message +" \n";
      }

      function sendMessage() {
        if (typeof websocket != 'undefined' && websocket.readyState == WebSocket.OPEN) {
          websocket.send(textMessage.value);
          textMessage.value = "";
        }
      }

    </script>
</body>
</html>

Khi mở trang nó sẽ tự động kết nối tới server websocket: ws://localhost:8080/WebSocket2/chatRoomServer

Demo

Chạy project trên server tomcat, sau đó mở 2 tab của trình duyệt (hoặc mở nhiều trình duyệt khác nhau) để thực hiện chat:

Demo chat room với WebSocket

Tạo ứng dụng chat với WebSocket: Java Server + JavaScript Client stackjava.com

Okay, Done!

Download code ví dụ trên tại đây.

 

References:

http://www.zaneacademy.com/

3 thoughts on “Tạo ứng dụng chat với WebSocket: Java Server + JavaScript Client

  • cổng port của em là 8082 thì em sửa ws://localhost:8082/WebSocket2/chatRoomServer.

    Nhưng khi chạy trên web nó báo lỗi là (index):14 WebSocket connection to ‘ws://localhost:8080/WebSocket2/chatRoomServer’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

    Có cách giải quyết gì ở đây không anh.
    Em cảm ơn

    • Nó vẫn đang connect tới port 8080 kìa bạn, bạn check kĩ lại file index.html xem đã sửa thành 8082 chưa, lưu lại + refresh lại project sau đó chạy lại là được nhé

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

DMCA.com Protection Status stackjava.com