美文网首页
客户端连接websoket服务

客户端连接websoket服务

作者: 剑指流云 | 来源:发表于2023-06-08 14:03 被阅读0次

    为了连接到一个 Socket.IO 服务器,需要将 Socket.IO 客户端库加载到你的前端 HTML 文件中。可以直接下载官方的 CDN 资源或通过 npm 安装。我们将在本例中使用官方的 CDN 资源。

    在 HTML 文件中,你需要添加以下代码去引入 Socket.IO 库:

    <script src="/socket.io.min.js"></script>
    

    接下来,你需要实例 Socket.IO 客户端,并与所连接的服务器的 WebSocket 连接中断进行交互。以下是一个简单的连接脚本:

    const socket = io();
    
    socket.on("connect", () => {
      console.log("Connected!");
    });
    
    socket.on("disconnect", () => {
      console.log("Disconnected!");
    });
    

    在这个例子中,我们通过 io() 实例化了一个新的 Socket.IO 客户端,并通过 on 方法监听 connectdisconnect 事件。当客户端与服务器成功连接时,我们会在控制台中打印 “Connected!” 信息。同样,在客户端离线时,我们会在控制台中打印 “Disconnected!” 信息。

    接下来,需要使用 emit 方法从客户端发送消息,如下所示:

    const socket = io();
    
    socket.emit("chat message", "Hello, World!");
    

    在这个例子中,我们使用 emit 方法向服务器发送一个名为 chat message 的事件,并发送了一个字符串 “Hello, World!” 作为该事件的数据负载。这些事件名称应该与服务器端设置的应用逻辑相同。

    最后,这是一个完整的例子,演示了如何将所有这些放在一起:

    <!-- index.html -->
    <!DOCTYPE html>
    <html>
      <head>
        <title>Socket.IO Example</title>
        <script src="/socket.io.min.js"></script>
      </head>
      <body>
        <ul id="messages"></ul>
    
        <form id="chat-form">
          <input id="message-input" type="text" autocomplete="off" /><button>
            Send
          </button>
        </form>
    
        <script>
          const socket = io();
    
          socket.on("connect", () => {
            console.log("Connected!");
          });
    
          socket.on("disconnect", () => {
            console.log("Disconnected!");
          });
    
          const chatForm = document.querySelector("#chat-form");
          chatForm.addEventListener("submit", (event) => {
            event.preventDefault();
            const messageInput = document.querySelector("#message-input");
            const message = messageInput.value.trim();
            if (message !== "") {
              socket.emit("chat message", message);
              messageInput.value = "";
            }
          });
    
          const messagesList = document.querySelector("#messages");
          socket.on("chat message", (message) => {
            const item = document.createElement("li");
            item.textContent = message;
            messagesList.appendChild(item);
          });
        </script>
      </body>
    </html>
    

    在这个例子中,我们创建了一个简单的聊天应用程序。当用户在文本框中输入文本并单击 “Send” 按钮时,将使用 emit 方法将文本发送给服务器。服务器将接收该消息并将其广播到所有连接的客户端,以便将消息正确显示在页面中。

    相关文章

      网友评论

          本文标题:客户端连接websoket服务

          本文链接:https://www.haomeiwen.com/subject/fecaedtx.html