你在 HTTPS 页面 里加载 HTTP 资源 → ，不支持 HTTPS → 握手失败。浏览器自动升级为 HTTPS。你的 8080 端口只支持 HTTP

从你的截图能看到两个核心问题：

1. 好友数据已经拿到了，但页面显示「暂无好友」

   • 控制台里 friendList 数组里明明有 {id:1, nickname:"小王"}
   • 页面却渲染了空状态，说明 v-for 循环没生效 或 数组判断逻辑有问题

2. WebSocket 安全报错

   plaintext

   SecurityError: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

   • 你现在用的是 https://longwen.natapp1.cc，但 WebSocket 连的是 ws://192.168.0.103:8080
   • 浏览器禁止在 HTTPS 页面发起 非加密 ws 连接 ，必须改成 wss:// 或用同域名代理

---

✅ 第一步：修复好友列表显示问题

问题出在空状态判断和数组渲染逻辑，我帮你改成最稳妥的版本：

vue

<!-- 把原来的空状态代码替换成这个 -->
<div v-if="friendList.length === 0" style="padding:16px; color:#999; text-align:center;">
  暂无好友（当前数组长度：{{ friendList.length }}）
</div>
<div 
  class="item-list" 
  v-for="friend in friendList" 
  :key="friend.id" 
  @click="openPrivateChat(friend)"
  style="cursor:pointer;"
>
  <img class="avatar" :src="IMG_BASE + friend.avatar" />
  <div class="name">{{ friend.nickname }} (ID:{{ friend.id }})</div>
</div>

同时在 getFriendList 里强制打印数组长度，方便你调试：

js

const getFriendList = async () => {
  try {
    const res = await service.get('/friends')
    const data = res.data?.data || res.data || []
    friendList.value = Array.isArray(data) ? data : []
    console.log('✅ 好友列表最终长度:', friendList.value.length)
    console.log('✅ 好友列表内容:', friendList.value)
  } catch (e) {
    console.error('❌ 获取好友失败', e)
    friendList.value = []
  }
}

---

✅ 第二步：修复 WebSocket 安全问题

把 ws:// 改成 wss://（如果你的后端支持 wss），或者用 Natapp 域名代理：

js

// 原来的代码：
// socket = new WebSocket(`ws://192.168.0.103:8080/ws?user_id=${myId.value}`)

// 改成下面任意一种：

// 方案1：如果你的后端支持 wss（推荐）
socket = new WebSocket(`wss://192.168.0.103:8080/ws?user_id=${myId.value}`)

// 方案2：用 Natapp 域名（和页面同域名，避免跨域）
socket = new WebSocket(`wss://longwen.natapp1.cc/ws?user_id=${myId.value}`)

---

🎯 最终效果

1. 页面会显示「小王」的好友条目，不再显示「暂无好友」
2. WebSocket 连接不再报安全错误，能正常实时聊天

---

💡 额外检查

如果改完还是不显示，打开控制台输入：

js

friendList.value

看返回是不是 [{id:1, nickname:"小王", ...}]，如果是数组但页面不渲染，就是 Vue 响应式问题，加一句强制更新：

js

import { nextTick } from 'vue'
// 在 getFriendList 最后加
nextTick(() => console.log('✅ 页面已更新'))

要不要我把完整修复后的代码直接给你，你复制覆盖就能用？