在前端开发中，用户交互的实时性越来越受到重视，而实现实时性需要使用 WebSocket 技术。为了方便在 Vue 项目中使用 WebSocket，我们可以使用 npm 包 vue-socket。本文将详细介绍 npm 包 vue-socket 的使用方法。
安装
安装 vue-socket 最简单的方法就是使用 npm 安装：
npm install vue-socket --save
使用
在 Vue 项目的主文件中，我们需要使用 vue-socket 的插件来初始化相关的配置。具体代码如下：
import VueSocketIO from 'vue-socket.io'
import Vue from 'vue'
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://localhost:3000'
}))上面代码中，我们引入了 vue-socket 的插件 VueSocketIO，并且通过 Vue.use() 方法来注册插件。在注册过程中，我们需要传递一个选项对象，其中 debug 表示是否开启调试模式，connection 表示 WebSocket 的连接地址。
在 Vue 组件中，我们可以通过 $socket 属性来访问 WebSocket 实例。$socket 属性包含了以下方法：
emit(eventName: string, ...args: any[])：向服务器端发送消息。on(eventName: string, callback: Function)：监听服务器端发送的消息。
示例代码
下面是一个示例代码，实现了在客户端输入信息并提交后，将信息发送到服务器端并展示在页面上。
-- -------------------- ---- -------
----------
-----
---- ----------------
---- ----------- -- --------- ---------------
-- ------------ --
------
------
---- --------------
------ ----------- ---------------------- --
------- --------------------------------
------
------
-----------
--------
------ ------- -
------ -
------ -
------------- ---
--------- ---
--
--
-------- -
------------- -
---------------------------- -------------------
----------------- - ---
--
--
--------- -
-------------------------- ------- -- -
--------------------
--- -----------
-------- --------
---
---
--
--
---------总结
通过以上介绍，我们可以看到 vue-socket 的使用非常简单，只需要引入插件并传递选项即可。在 Vue 组件中，我们可以通过 $socket 属性轻松地访问 WebSocket 实例，并实现实时通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ccf81e8991b448e65aa