nettysocetio-demo2(nettysocetio通信,兩客戶端聊天,羣發消息改造)

前言:
    網上大多數都是隻能羣發,或者只能發給本身.並無一個案例完整的羣發而且又能夠客戶端之間聊天的案例,特此改造好的案例給你們分享一下.只要是一對一聊天,一對多羣發. 此案例是在服務器端接口方式.javascript

內容:css

    此demo更直觀傳遞實體類數據,直接上代碼:建立一個maven項目,而且把代碼複製過去.html

第一:實體類前端

import lombok.Data;
import java.util.UUID;

@Data
public class Message {
    //源客戶端id
    private String clientId;
    //源客戶端名字
    private String clientName;
    //sessionId
    private UUID sessionId;
    //目標客戶端id
    private String targetClientId;
    //目標客戶端名字
    private String targetClientName;
    //目標客戶端sessionId
    private UUID targetSessionId;
    //消息類型
    private String messageType;
    //消息類型
    private String messageTime;

    //消息類型
    private String xMessageContent;

    public String getClientId() {
        return clientId;
    }

    public void setClientId(String clientId) {
        this.clientId = clientId;
    }

    public String getClientName() {
        return clientName;
    }

    public void setClientName(String clientName) {
        this.clientName = clientName;
    }

    public UUID getSessionId() {
        return sessionId;
    }

    public void setSessionId(UUID sessionId) {
        this.sessionId = sessionId;
    }

    public String getTargetClientId() {
        return targetClientId;
    }

    public void setTargetClientId(String targetClientId) {
        this.targetClientId = targetClientId;
    }

    public String getTargetClientName() {
        return targetClientName;
    }

    public void setTargetClientName(String targetClientName) {
        this.targetClientName = targetClientName;
    }

    public UUID getTargetSessionId() {
        return targetSessionId;
    }

    public void setTargetSessionId(UUID targetSessionId) {
        this.targetSessionId = targetSessionId;
    }

    public String getMessageType() {
        return messageType;
    }

    public void setMessageType(String messageType) {
        this.messageType = messageType;
    }

    public String getMessageTime() {
        return messageTime;
    }

    public void setMessageTime(String messageTime) {
        this.messageTime = messageTime;
    }

    public String getxMessageContent() {
        return xMessageContent;
    }

    public void setxMessageContent(String xMessageContent) {
        this.xMessageContent = xMessageContent;
    }

    public Message(String clientId, String clientName, UUID sessionId, String targetClientId, String targetClientName, UUID targetSessionId, String messageType, String messageTime, String xMessageContent) {
        this.clientId = clientId;
        this.clientName = clientName;
        this.sessionId = sessionId;
        this.targetClientId = targetClientId;
        this.targetClientName = targetClientName;
        this.targetSessionId = targetSessionId;
        this.messageType = messageType;
        this.messageTime = messageTime;
        this.xMessageContent = xMessageContent;
    }
    public Message() {
        super();
    }
}

 

第二:監聽java

import com.corundumstudio.socketio.AckRequest;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.annotation.OnConnect;
import com.corundumstudio.socketio.annotation.OnDisconnect;
import com.corundumstudio.socketio.annotation.OnEvent;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentMap;

@Component
@Slf4j
public class MessageEventHandler {

    @Autowired
    private SocketIOServer socketIoServer;

    //public static ConcurrentMap<String, SocketIOClient> socketIOClientMap = new ConcurrentHashMap<>();

    /**
     * 客戶端鏈接的時候觸發
     *
     * @param client
     */
    @OnConnect
    public void onConnect(SocketIOClient client) {

        //鏈接服務器初始化值
        String clientId = client.getHandshakeData().getSingleUrlParam("clientId");
        String clientName = client.getHandshakeData().getSingleUrlParam("clientName");
        Message msg = new Message(clientId,
                clientName,
                client.getSessionId(),
                null,
                null,
                null,
                "connect",
                getDate(),
                getXMessageContent()
        );

        //發送給鏈接成功的客戶端,而且發送SessionId給客戶端
        //socketIoServer.getClient(client.getSessionId()).sendEvent("messageevent",msg);

        //回發消息
        client.sendEvent("messageevent", msg);
        //client.sendEvent("messageevent", client.getSessionId() +"已鏈接");
        //System.out.println("客戶端:" + client.getSessionId() + "已鏈接,\n msg=" + msg);
    }

    //消息模型
    private String getXMessageContent() {
        String msgModel = "<xmsg></xmsg>";
        return msgModel;
    }

    //取時間
    private String getDate() {
        long currentTime = System.currentTimeMillis();

        SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMdd-HHmmss");

        Date date = new Date(currentTime);

        System.out.println(formatter.format(date));

        return formatter.format(date);
    }

    /**
     * 客戶端關閉鏈接時觸發
     *
     * @param client
     */
    @OnDisconnect
    public void onDisconnect(SocketIOClient client) {
        Message msg = new Message(null,
                null,
                null,
                null,
                null,
                null,
                "disconnect",
                getDate(),
                null
        );
        //回發消息
        client.sendEvent("messageevent", msg);
        client.sendEvent("messageevent", "斷開鏈接");
        System.out.println("客戶端:" + client.getSessionId() + "斷開鏈接");
    }

    /**
     * 客戶端事件
     *
     * @param client   客戶端信息
     * @param request 請求信息
     * @param data     客戶端發送數據
     */
    @OnEvent(value = "messageevent")
    public void onEvent(SocketIOClient client, AckRequest request, Message data) {
        System.out.println("發來消息:" + data);

        //發送給指定客戶端
        socketIoServer.getClient(data.getTargetSessionId()).sendEvent("messageevent",data);

        //發送給本身客戶端
        socketIoServer.getClient(client.getSessionId()).sendEvent("messageevent",data);

        //廣播消息
        //sendBroadcast();
    }

    /**
     * 廣播消息
     */
    /*public void sendBroadcast() {
        for (SocketIOClient client : socketIOClientMap.values()) {
            if (client.isChannelOpen()) {
                client.sendEvent("Broadcast", "當前時間", System.currentTimeMillis());
            }
        }

    }*/
}

 

第三:服務器web

import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.annotation.SpringAnnotationScanner;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class NettySocketioConfig {
    /**
     * netty-socketio服務器
     */
    @Bean
    public SocketIOServer socketIOServer() {
        com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration();
        config.setHostname("localhost");
        config.setPort(9092);

        SocketIOServer server = new SocketIOServer(config);
        return server;
    }

    /**
     * 用於掃描netty-socketio的註解,好比 @OnConnect、@OnEvent
     */
    @Bean
    public SpringAnnotationScanner springAnnotationScanner() {
        return new SpringAnnotationScanner(socketIOServer());
    }
}

 

第四:啓動類spring

import com.corundumstudio.socketio.SocketIOServer;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@Slf4j
public class NettySocketioApplication implements CommandLineRunner {

    public static void main(String[] args) {
        SpringApplication.run(NettySocketioApplication.class, args);
    }

    @Autowired
    private SocketIOServer socketIOServer;

    @Override
    public void run(String... strings) {
        socketIOServer.start();
        System.out.println("socket.io啓動成功!");
    }
}

 

第五:HTML客戶端後端

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>websocket-java-socketio</title>
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
</head>
<body>
<h1>Socket.io Test</h1>
<div><p id="status">Waiting for input</p></div>
<div><p id="message">hello world!</p></div>
<input id="sessionId" class="input-xlarge" type="text" placeholder="誰發送?" />
<input id="targetSessionId" class="input-xlarge" type="text" placeholder="發送給誰?" /></br>
<button id="connect" onClick='connect()'/>Connect</button>
<button id="disconnect" onClick='disconnect()'>Disconnect</button>
<button id="send" onClick='send()'/>Send Message</button>
</body>

<script type="text/javascript">

    /**
     * 前端js的 socket.emit("事件名","參數數據")方法,是觸發後端自定義消息事件的時候使用的,
     * 前端js的 socket.on("事件名",匿名函數(服務器向客戶端發送的數據))爲監聽服務器端的事件
     **/

        //初始化URL
        //源客戶端ID
    var clientId="123456";
    //源客戶端名字
    var clientName="張三";
    //sessionId
    var sessionId=null;
    //目標客戶端id
    var targetClientId=null;
    //目標客戶端名字
    var targetClientName=null;
    //目標客戶端sessionId
    var targetSessionId=null;
    //消息類型
    var messageType=null;
    //消息類型
    var messageTime=null;
    //消息類型
    var xMessageContent=null;

    var url = "http://localhost:9092?clientId="+clientId+"&"+"clientName="+clientName;
    var socket = io.connect(url);
    var firstconnect = true;

    function connect() {
        if(firstconnect) {

            //socket.on('reconnect', function(){ status_update("Reconnected to Server"); });
            //socket.on('reconnecting', function( nextRetry ){ status_update("Reconnecting in "
            //+ nextRetry + " seconds"); });
            //socket.on('reconnect_failed', function(){ message("Reconnect Failed"); });
            //firstconnect = false;
        } else {
            socket.socket.reconnect();
        }
    }

    //監聽服務器鏈接事件
    socket.on('connect', function(){ status_update("Connected to Server"); });
    //監聽服務器關閉服務事件
    socket.on('disconnect', function(){ status_update("Disconnected from Server"); });
    //監聽服務器端發送消息事件
    socket.on('messageevent', function(data) {
        message(data)
        //console.log("服務器發送的消息是:"+data);
    });

    //斷開鏈接
    function disconnect() {
        socket.disconnect();
    }

    function message(data) {
        document.getElementById('message').innerHTML = "Server says: " + data;
    }

    function status_update(txt){
        document.getElementById('status').innerHTML = txt;
    }

    function esc(msg){
        return msg.replace(/</g, '<').replace(/>/g, '>');
    }
    //點擊發送消息觸發
    function send() {
        console.log("點擊了發送消息,開始向服務器發送消息")
        var msg = {
            clientId:clientId,
            clientName:clientName,
            sessionId:document.getElementById('sessionId').value,
            targetClientId:targetClientId,
            targetClientName:targetClientName,
            targetSessionId:document.getElementById('targetSessionId').value,
            messageType:messageType,
            messageTime:null,
            xMessageContent:null
        };
        socket.emit('messageevent', msg);
    };
</script>
</html>

 

總結:此demo2偏向於接口方式,Vue,Wux,uni-app等整合起來相對易於整合. 本demo是對於一對一聊天,羣發聊天等.服務器

相關文章
相關標籤/搜索