前后端分离的Netty + WebSocket实现聊天室

CRE_Miao

于 2025-02-20 21:02:52 发布

阅读量417

点赞数 3

文章标签： websocket python 网络协议

本文链接：https://blog.youkuaiyun.com/qq_45722630/article/details/145763056

版权

1. 前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
</head>
<body>


<script type="text/javascript">

    var socket;
    if (!window.WebSocket) {
   
        window.WebSocket = window.MozWebSocket;
    }

    if (window.WebSocket) {
   
        socket = new WebSocket("ws://localhost:8088/ws");
        socket.onmessage = function(event) {
   
            console.log("receive message:" + event.data)
            var ele = document.getElementById('respText');
            ele.value = ele.value + "\n" + event.data;
        };

        socket.onopen = function(event) {
   
            var ele = document.getElementById('respText');
            ele.value = "连接开启";
        }

        socket.onclose = function(event) {
   
            var ele = document.getElementById('respText');
            ele.value = ele.value + "连接被关闭";
        }

    } else {
   
        alert("Your browser does not support WebSocket!");
    }



    function sendMessage(message) {
   
        if (!window.WebSocket) {
   
            alert("Your browser does not support WebSocket!")
            return;
        }
        if (socket.readyState == WebSocket.OPEN) {
   
            socket.send(message);
            console.log("send message:" + message)
        } else {
   
            alert("The connection is not open.");
        }
    }


</script>


<form onsubmit="return false">
    <h3>WebSocket Chat</h3>

    <textarea name="" id= "respText" style="width: 500px;height: 300px"></textarea>
    <input type="text" name="message" style="width: 300px" value="Welcome to chat.marding.cn">
    <input type="button" value="发送" onclick="sendMessage(this.form.message.value)">
    </input>
</form>
</body>
</html>

2. 后端

@Component
public class WebSocketChatServer {
   

    private int port;

    public WebSocketChatServer(@Value("${websocket.port:8088}") int port) {
   
        this.port = port;
    }

    @PostConstruct
    public void init() {
   
        try {
   
            this.run();
        } catch (Exception e) {
   
            throw new RuntimeException(e);
        }
    }

    public static void main(String[] args) throws Exception {
   
        //new WebSocketChatServer(8088).run();
    }

    public void run() throws Exception {
   

        NioEventLoopGroup bossGroup = new NioEventLoopGroup(1);
        NioEventLoopGroup workerGroup = new NioEventLoopGroup();
        try {
   
            ServerBootstrap serverBootstrap = new ServerBootstrap();
            serverBootstrap.group(bossGroup,workerGroup)
            		// 非阻塞式IO
                    .channel(NioServerSocketChannel.class)
                    // 在每次有新的客户端连接时被调用，用来初始化这个新连接的 ChannelPipeline
                    .childHandler(<