客户端连接websoket服务
2023-06-08 本文已影响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 方法监听 connect 和 disconnect 事件。当客户端与服务器成功连接时，我们会在控制台中打印 “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 方法将文本发送给服务器。服务器将接收该消息并将其广播到所有连接的客户端，以便将消息正确显示在页面中。
