哈喽，现在网上好多网站都用上了Websocket！直接用这个可以随时随地掌握最新动态。简单来说，就是在你和服务器之间搭建了条通道，就能实现即时交流了。做Vue项目的话，像建个聊天室或者实时更新数据什么的，超好用的。接下来我会给你们讲讲怎么用WebSocket在Vue项目里实现实时沟通，还会有实际操作步骤。

安装WebSocket库

Vue网站想要加上WebSocket功能？别急，安装个WebSocket库就能搞定！怎么安装？其实很简单哦：

bash
装个vue-native-websocket上 npm！

搞定vue后，简单在main.js里加点儿代码就可以耍WebSocket

javascript
要使用VueNativeSock这个东西，你得先引入它。
直接在vue项目里安上VueNativeSock库，然后设置连接地址为 ws://localhost:3000 跟自动重连功能搞定，就这么简单！
首先得装个vue-native-websocket插件然后在设置中把WebSocket URL改成"ws://localhost:3000"。别忘了打上"自动重新连接"！设置好这个以后，WebSocket连接就没问题了~
创建WebSocket组件
咱们抓紧时间搞个WebSocket链接和闲聊~首先，随便找个地方新建个名叫WebSocket.vue的文件，往里头直接复制以下代码就行！
npm install vue-native-websocket
vue
Connected to WebSocket server
export default {
import VueNativeSock from 'vue-native-websocket'
Vue.use(VueNativeSock, 'ws://localhost:3000', {
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000
})

  data(){
    return {
      connected: false,
      messages:[]
    }
},
  mounted(){
没错，这么搞真是太好了！接下来，勾上”this $ options”的接收信息功能就搞定。然后，didMessage(message)这个方法可以帮你轻松应对别人传来的新讯息，跟打游戏似的没难度？
这 messages ，其实就相当于别人给咱们发了个 json 格式的邮件，咱们得先把它转化成咱们能理解的形式再处理。
快来学个实用小技巧！想要程序一运行就能开始工作吗？只需要在”socket(s)”这行程序后面添上” onopen()”就好了~
  

    
WebSocket Example
    
Connecting to WebSocket server...
    
Connected to WebSocket server!
    Send Data
    

      

        {{ message.text }}
      
    
  


export default {
  name: 'WebSocketExample',
  data() {
    return {
      connected: false,
      messages: []
    }
  },
  methods: {
    sendData() {
      this.$socket.send('Hello WebSocket Server!')
    }
  },
  mounted() {
    this.$options.sockets.onmessage = (event) => {
      this.messages.unshift({ id: Date.now(), text: event.data })
    }
    this.$options.sockets.onopen = () => {
      this.connected = true
    }
    this.$options.sockets.onclose = () => {
      this.connected = false
    }
  }
}


      this.connected = true
}
}
这个小程序做出来了一个名叫WebSocket Example的玩意儿，其中包含两个部分：是否联网（connected）和存放消息（messages）。首先，程序会根据$options.sockets找到你的网络设备，设置好message、open、close等反馈函数。搞定之后，就是等待接收消息咯。收到新消息，马上扔进messages里面，再通过v-for展现在你眼前。另外，无论你是不是在网上，connected都能告诉你真相！
使用WebSocket组件
那么咱们接下来，来试试如何把WebSocketExample应用到别处的代码怎么样？先从App.vue这个组件开始试试看，加上几行代码就能轻松搞定在线即时交流！
    <h1>Real-time Chat App</h1>
把WebSocket组件引入到我的项目中。
  components:{
    WebSocketExample
搞定嘞！直接在App.vue文件里面添个WebSocketExample试试看嘛～这会儿聊天框是不是已经搞定喽？这么一搞，我们的Vue项目就能实时聊天。
启动WebSocket服务器
  

    
  


搞定！想让前后端聊起来顺畅无阻，咱就得有个WebSocket服务器来处理信息。用下Node.js和ws库，在我们那个名叫server.js的文件里面插进去这段代码就成。
我们需要使用WebSocket这个东西。
启动个wss服务器呗，端口设为3000就行了。
wss.on(‘connection’, ws =>{
登陆成功！
  ws.on(‘message’, message =>{
别急，我们给每个客户都发个信息。
如果客户端不是ws且状态是打开的，就给它分配任务。
const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 3000 })
wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log('Received: ' + message)
    ws.send('Hello Client!')
  })
})

        client.send(message)
      }
    })
})
})
我这就搭好了一个Ws服务器在3000端口等你来连！一旦你连上来，服务器就会热情地问你好：“新来的，欢迎光临！”并且，还能自动接收到并处理大家给你发来的信息。最酷炫的就是，收到啥好玩的消息，服务器还会自动转发给其他在线的朋友们，让你们全都能看见！
搞定！咱把Vue项目里的WebSocket搞好了，这下聊天更有趣了！一定记得装好那些必不可少的工具，基础设置得先搞清楚。再说了，前端部分也不能马虎！后台服务相关的事儿也得多留意嘞，别辜负我这一番心意。看过这文章后，希望你们能轻松掌握如何用Vue和WebSocket实现实时应用哟~
			    						    						    						    					    		
			    					    				    					    			
 原文链接：https://www.icz.com/technicalinformation/web/2024/04/13158.html，转载请注明出处~~~