Vue必备！WebSocket如何让你聊天更便利？

现在这个时代，交流方式五花八门。不过大家常用的大概就是那种即时哒聊天工具~每天都有好多人发信息给咱们，当然速度越快、准确性越高就越受欢迎！这不，WebSocket就来帮大忙不论更新信息，还是进行信息互通都很给力！最主要的是还能节省流量真是太便利！接下来我就教大家如何用WebSocket做个超实用的Vue聊天工具，边做边学，让你学到更多知识喔～

安装Vue

先装个Vue！这玩意儿是个牛逼的Javascript框架，让你建站超轻松。也就敲下面那条指令那么简单，安装起来就是战五渣级别。

bash
npm install vue

安装WebSocket客户端库

别以为只需要安装个Vue框架就算，还得弄个Socket.io的客户端库，这个玩意儿可以帮咱们飞快地跟Web服务聊上两句。这库可厉害，连怎么连接服务器、发信息这些事儿它都能做。操作起来简单得很，走几个步子就好啦：

npm下载安装vue-native-websocket

创建Vue实例

首先，我们得在Vue里弄个WebSocket对象。直接加到你喜欢的vue文件，比如main.js里就行。然后记得设置下Socket的链接地址，比如’dynamic/ws/localhost: 3000’（这个是举例根据自己需求来设）。

javascript
npm install vue
import Vue from 'vue';

试试用VueNativeSock！这个小工具能让你的Vue项目与安卓或iOS设备完美结合呢～

想搞定vue-native-sock，就得按顺序来使用vue.use，接着连接到"ws://localhost:3000"这个地址。接下来怎么办？别急，咱们边实践边聊。

  reconnection: true,

  reconnectionAttempts:5,
npm install vue-native-websocket
  reconnectionDelay: 3000,

});

编写聊天组件

我们试试新的Chat.vue，可以看到每个人的留言！用v-for，轻轻松松显示留言；然后是v-model，随心所欲地打字、看得明明白白。最后，别忘了点"提交"，sendMessage马上开工，你说啥，服务器就收啥啦～

vue
    Send</button>

export default {
import Vue from 'vue'
import VueNativeSock from 'vue-native-websocket'
Vue.use(VueNativeSock, 'ws://localhost:3000', {
  connectManually: true,   // 手动连接
  reconnection: true,      // 自动重连
  reconnectionAttempts: 5, // 重连尝试次数
})
new Vue({
  render: h => h(App),
}).$mount('#app')

  data(){
    return {
      messages:[],
      newMessage:”,
    };
},
  

    
{{ message.content }}
    
    发送
  

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 3000 })
wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    wss.clients.forEach((client) => {
      client.send(message)
    })
  })
})

npm run serve