js使用WebSocket的示例代码

置顶程序员大侠

已于 2024-05-03 10:36:03 修改

阅读量360

点赞数 6

分类专栏：前端 JavaScript 文章标签： websocket js

于 2024-05-03 10:35:21 首次发布

本文链接：https://blog.csdn.net/lalala8866/article/details/138411384

版权

前端同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

下面是一个使用JavaScript和WebSocket的最小示例代码：

创建了一个WebSocket对象（浏览器内置的对象），并与服务器建立连接。
定义了一些事件处理程序来处理连接的不同阶段和接收到的消息。
提供了一个按钮和一个文本框，使用户能够发送消息到服务器。

注意：你需要将ws://localhost:3000替换为你自己服务器的WebSocket地址。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Demo</title>
</head>
<body>
    <input type="text" id="message" placeholder="Type a message">
    <button onclick="sendMessage()">Send</button>
    <div id="output"></div>

    <script>
        // 创建WebSocket对象并连接到服务器
        const socket = new WebSocket('ws://localhost:3000');

        // 当连接建立成功时触发
        socket.onopen = () => {
            console.log('连接已建立');
        };

        // 当接收到服务器消息时触发
        socket.onmessage = (event) => {
            const message = event.data;
            console.log(`接收到消息: ${message}`);
            const output = document.getElementById('output');
            output.innerHTML += `<p>${message}</p>`;
        };

        // 当连接关闭时触发
        socket.onclose = () => {
            console.log('连接已关闭');
        };

        // 当发生错误时触发
        socket.onerror = (error) => {
            console.error('WebSocket错误:', error);
        };

        // 发送消息到服务器
        function sendMessage() {
            const messageInput = document.getElementById('message');
            const message = messageInput.value;
            socket.send(message);
            messageInput.value = '';
        }
    </script>
</body>
</html>

如果觉得文章不错，不妨大赞一个❤️

程序员大侠

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
3
评论
js使用WebSocket的示例代码

/ 创建WebSocket对象并连接到服务器。替换为你自己服务器的WebSocket地址。如果觉得文章不错，不妨大赞一个❤️。// 当接收到服务器消息时触发。'WebSocket错误:'// 当连接建立成功时触发。// 当连接关闭时触发。// 当发生错误时触发。// 发送消息到服务器。
复制链接

扫一扫