ws.message is undefined问题：Python开发者需在浏览器查看WebSocket输出

我是一名Python开发者，需要在浏览器中查看WebSocket输出。

client.js文件代码 #

function startSocket() {
    var ws = new WebSocket("ws://localhost:8765/")
    ws.onopen = function(event) {
        ws.send("Sent this from client.js")
        console.log(typeof ws.message);
        console.log("test")
        console.log(ws.message)
    }
}
startSocket();

HTML文件代码 #

<!DOCTYPE html><html lang="en">
  <head>
<!--    <link rel="stylesheet" type="text/css" href="style.css">-->
    <link type="text/css" href="styles.css">
    <meta charset="utf-8">

  </head>
  <body>
    <script src="client.js"></script>

</body></html>

异常现象 #

WebSocket连接可正常建立，但控制台日志显示ws.message为undefined，日志内容如下：

client.js:6 undefined
client.js:7 test
client.js:8 undefined

问题根源：WebSocket对象并没有message属性，要获取服务器发送的消息，必须通过onmessage事件回调来处理，而非直接访问不存在的属性。当前代码仅在连接建立时发送了消息，未监听服务器的响应。

修复后的client.js代码 #

function startSocket() {
    var ws = new WebSocket("ws://localhost:8765/")
    
    // 连接建立时发送消息
    ws.onopen = function(event) {
        ws.send("Sent this from client.js")
        console.log("消息已发送至服务器");
    }
    
    // 监听服务器返回的消息
    ws.onmessage = function(event) {
        // event.data 即为服务器发送的内容
        console.log("收到服务器消息：", event.data);
        console.log("消息类型：", typeof event.data);
    }
    
    // 可选：监听WebSocket错误
    ws.onerror = function(error) {
        console.error("WebSocket错误：", error);
    }
    
    // 可选：监听连接关闭事件
    ws.onclose = function(event) {
        console.log("WebSocket连接已关闭：", event);
    }
}
startSocket();

额外提示 #

• 确保你的Python WebSocket服务器能正确接收消息并返回响应，否则onmessage回调不会触发。
• HTML文件中的<link>标签缺少rel="stylesheet"属性，建议修正为：<link rel="stylesheet" type="text/css" href="styles.css">，避免浏览器解析异常。

内容的提问来源于stack exchange，提问作者Selman