html 套接字未定义+其他错误

mbzjlibv 于 2022-12-09 发布在其他

关注(0)|答案(2)|浏览(145)

服务器端代码：

const http = require("http");
const host = 'localhost';
const port = 8000;
const { Server } = require("socket.io");

// creating the server and starting it on port 8000
const server = http.createServer();
server.listen(port, host, () => {
    console.log(`Server is running on http://${host}:${port}`);
});
// making io object
const io = new Server(server);

// listening to connections to the server
io.on('connection', (socket) => {
    console.log('a user connected');
  });

// listening on port 8000
server.listen(8000, () => {
    console.log('listening on *:8000');
  });

// chat message coming to server

socket.on("details", (chatBundle) => {
    console.log(chatBundle);
});

客户端代码：

<!DOCTYPE html>
<html>
    <body>
        <h1>CHAT ROOM</h1>
        <form onsubmit="return sendServer()">
            <label for="name">Name: 
                <input id="name" name="name" type="text">
            </label>
            
            <label for="text">Message: 
                <input id="text" name="text" type="text">
            </label>
            
            <input type="submit" id="send" >
        </form>
        <script src="/Users/chanson/node_modules/socket.io/client-dist/socket.io.js">
        </script>
        <script>
            function sendServer(){
                var sender = document.getElementById("name");
                var text = document.getElementById("text");
                var tempArray = [sender, text]
                socket.emit(chatmsg, tempArray)
            };
        </script>
        
    </body>
</html>

目标：使聊天信使，将工作在相同的计算机浏览器+端口.例如，Firefox端口用户可以沟通到Chrome，Edge，Opera和Safari.（请不要问为什么我有这么多的浏览器）.

Html

来源：https://stackoverflow.com/questions/74736091/socket-is-not-defined-other-errors

2条答案

按热度按时间

xoefb8l81#

我不喜欢您导入套接字客户端的方式，请执行以下操作

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

之后，您必须示例化tour套接字，如下所示：

const socket = io();
const text = document.getElementById("text")
socket.emit('chatMessage', text.value);

确保事件名称为字符串ex，如下所示：chatMessage

赞(0）回复(0）举报 2022-12-09

cu6pst1q2#

客户端错误（3）

1.尚未定义chatmsg或为其指定值

socket尚未创建或分配给变量
sendServer返回undefined，而不是false，因此在按下提交按钮时不会阻止表单提交。（在提交事件中调用event.preventDefault是一种更现代的阻止提交的方法）。
解决以下注意事项的脚本元素：

<script>
    const chatmsg = "details"; // added
    const socket = io(); // added
    function sendServer(){
        var sender = document.getElementById("name");
        var text = document.getElementById("text");
        var tempArray = [sender, text]
        socket.emit(chatmsg, tempArray)
    return false; // added
    };
</script>

服务器端错误（多个）

1.* * 无应用程序**。
必须从服务器提供客户端页面，以便使用套接字与之通信-如果使用file://协议加载客户端页面，然后尝试使用socket.io与本地主机服务器通信，则会生成CORS错误。
1.可以设置一个简单的静态express服务器来处理http://localhost:8000/client.html请求。

The server must also be capable of serving the socket.io client script using a suitable url in the src attribute of the client side script tag. A client tag used in testing was

<script src="node_modules/socket.io-client/dist/socket.io.js"></script>

但将取决于服务器目录结构，并且可能取决于所使用的socket.io.js的版本。
创建http服务器时，应用程序作为参数提供。
1.在用于测试的socketIO版本中，要求socket.io返回一个函数，调用该函数以生成套接字服务器。请检查文档以验证更高版本是否返回具有Socket属性的导出对象。（请参阅答案底部的注解）
1.* * 套接字消息侦听**
这是错误的位置-server是提供给io.on("connection", handler)处理函数的参数，并且侦听由建立连接的用户生成的套接字事件应在连接处理函数的函数范围内进行。

测试中使用的代码

- 客户端. html**

<!DOCTYPE html>
<html>
    <body>
        <h1>CHAT ROOM</h1>
        <form onsubmit="return sendServer()">
            <label for="name">Name: 
                <input id="name" name="name" type="text">
            </label>
            
            <label for="text">Message: 
                <input id="text" name="text" type="text">
            </label>
            
            <input type="submit" id="send" >
        </form>
        <!-- <script src="/Users/chanson/node_modules/socket.io/client-dist/socket.io.js"> -->
        <!-- particular to server setup: -->
        <script src="node_modules/socket.io-client/dist/socket.io.js"></script>
        <script>
            const chatmsg = "details";
            var socket = io();
            function sendServer(){
                var sender = document.getElementById("name");
                var text = document.getElementById("text");
                var tempArray = [sender, text]
                socket.emit(chatmsg, tempArray)
                return false;
            };
        </script>
        
    </body>
</html>

- 节点脚本**

const http = require("http");
const host = 'localhost';
const port = 8000;
 //** const { Server } = require("socket.io");
 //** 
    const express = require('express');
    const app = express();
    app.use(express.static('./'));
 const socketIO = require("socket.io");
 

// creating the server and starting it on port 8000
//**const server = http.createServer();
   const server = http.createServer(app);

server.listen(port, host, () => {
    console.log(`Server is running on http://${host}:${port}`);
});
// making io object

//**  const io = new Server(server);
    const io = socketIO(server, {cookie: false}); /* prevent io cookie - see https://github.com/socketio/socket.io/issues/2276 */

// listening to connections to the server
io.on('connection', (socket) => {
    console.log('a user connected');
    
//** move listening here, where socket is defined
    // chat message coming to server
    socket.on("details", (chatBundle) => {
           console.log(chatBundle);
    });
});

The version of socket.io used to prepare this answer was 2.2.0.
4.x版文档确认socket仍提供给连接处理程序。
版本4.x doco显示Server是从socket.io包 * 导入 * 的，这在CommonJS包中无法完成，因为不支持import语句。
AFAIK如果在节点中需要CommonJS程序包中的ECMA module程序包，则会返回ECMASScript模块的默认导出。如果它不是在版本4中导出的Server构造函数（或类对象），则可能需要进一步调查。
您可以在CommonJS中使用import函数（非关键字）导入ECMAScript模块，但导入操作是异步的。有关详细信息，请参阅How to use ES6 modules CommonJS。

赞(0）回复(0）举报 2022-12-09

我来回答

html 套接字未定义+其他错误

2条答案

客户端错误（3）

服务器端错误（多个）

测试中使用的代码

相关问题

热门标签

最新问答