vue-native-websocket-vue3 - npm Package Compare versions

Comparing version 3.1.0 to 3.1.2

package.json

 {
   "name": "vue-native-websocket-vue3",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "支持vue3和vuex的websocket插件",
@@ -5,0 +5,0 @@ "main": "dist/vueNativeWebsocket.common.js",

README-EN.md

 # vue-native-websocket-vue3 · [![npm version](assets/svg/npm-v3.0.2.svg)](https://www.npmjs.com/package/vue-native-websocket-vue3) [![yarn version](assets/svg/yarn-v3.0.2.svg)](https://classic.yarnpkg.com/zh-Hans/package/vue-native-websocket-vue3) [![github depositary](assets/svg/GitHub-depositary.svg)](https://github.com/likaia/vue-native-websocket-vue3)
-Websocket plugin that supports vue 3 and vuex 
+Only supports vue 3 websocket plugin
 
@@ -316,6 +316,31 @@ Chinese documents please move: [README.md](README.md)
 ```typescript
+// optionsAPI
 this.$options.sockets.onmessage = (res: { data: string }) => {
   console.log(data);
 }
+
+// CompositionAPI
+import { getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+proxy.$socket.onmessage = (res: {
+  data: string;
+}) => {
+  console.log(data);
+}
 ```
+
+Send messages, push messages to the server
+```typescript
+// optionsAPI
+this.$socket.sendObj({msg: 'msgText'});
+
+// compositionAPI
+const internalInstance = data.currentInstance;
+internalInstance?.proxy.$socket.sendObj({
+  msg: "msgText"
+});
+```
+> The composition API is written because the vue instance cannot be obtained in the setup, so the instance needs to be stored in the global object after the page is mounted, and then the instance is taken out when it is used. For detailed usage, please refer to the writing in my chat-system: [InitData.ts#L91](https://github.com/likaia/chat-system/blob/cacf587061f3a56198ade33a2c5bebeacec004a5/src/module/message-display/main-entrance/InitData.ts#L91) 、[EventMonitoring.ts#L50](https://github.com/likaia/chat-system/blob/db35173c8e54834a117ac8cb5a3753e75d9b1161/src/module/message-display/main-entrance/EventMonitoring.ts#L50) 、[SendMessage.ts#L73](https://github.com/likaia/chat-system/blob/db35173c8e54834a117ac8cb5a3753e75d9b1161/src/module/message-display/components-metords/SendMessage.ts#L73) 、[contact-list.vue#L620](https://github.com/likaia/chat-system/blob/91fe072a20d0928ff2af6c1bf56cedd0e545d0d5/src/views/contact-list.vue#L620)
+
+
 Remove message monitoring
@@ -331,2 +356,2 @@ ```typescript
 
-Original plug-in code address: [vue-native-websocket](https://github.com/nathantsoi/vue-native-websocket)
+Please move to the original plugin for Vue 2 version: [vue-native-websocket](https://github.com/nathantsoi/vue-native-websocket)

README.md

@@ -1,3 +0,3 @@
-# vue-native-websocket-vue3 · [![npm version](assets/svg/npm-v3.0.2.svg)](https://www.npmjs.com/package/vue-native-websocket-vue3) [![yarn version](assets/svg/yarn-v3.0.2.svg)](https://classic.yarnpkg.com/zh-Hans/package/vue-native-websocket-vue3) [![github depositary](assets/svg/GitHub-depositary.svg)](https://github.com/likaia/vue-native-websocket-vue3)
-支持vue3和vuex的websocket插件 | Websocket plugin that supports vue 3 and vuex 
+# vue-native-websocket-vue3 · [![npm version](https://img.shields.io/badge/npm-v3.1.2-2081C1)](https://www.npmjs.com/package/vue-native-websocket-vue3) [![yarn version](https://img.shields.io/badge/yarn-v3.1.2-F37E42)](https://classic.yarnpkg.com/zh-Hans/package/vue-native-websocket-vue3) [![github depositary](assets/svg/GitHub-depositary.svg)](https://github.com/likaia/vue-native-websocket-vue3)
+仅支持vue3的websocket插件 | Only supports vue 3 websocket plugin 
 
@@ -323,4 +323,4 @@ English documents please move: [README-EN.md](README-EN.md)
 import { getCurrentInstance } from "vue";
-const currentInstance = getCurrentInstance();
-(currentInstance?.appContext.config.globalProperties.sockets).onmessage = (res: {
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+proxy.$socket.onmessage = (res: {
   data: string;
@@ -331,2 +331,16 @@ }) => {
 ```
+
+发送消息，向服务端推送消息
+```typescript
+// optionsAPI用法
+this.$socket.sendObj({msg: '消息内容'});
+
+// compositionAPI写法
+const internalInstance = data.currentInstance;
+internalInstance?.proxy.$socket.sendObj({
+  msg: "消息内容"
+});
+```
+> compositionAPI写法由于在setup中无法拿到vue实例，因此需要在页面挂载后将实例存储到全局对象中，用的时候再将实例取出来。详细使用方法可以参考我的chat-system中的写法：[InitData.ts#L91](https://github.com/likaia/chat-system/blob/cacf587061f3a56198ade33a2c5bebeacec004a5/src/module/message-display/main-entrance/InitData.ts#L91) 、[EventMonitoring.ts#L50](https://github.com/likaia/chat-system/blob/db35173c8e54834a117ac8cb5a3753e75d9b1161/src/module/message-display/main-entrance/EventMonitoring.ts#L50) 、[SendMessage.ts#L73](https://github.com/likaia/chat-system/blob/db35173c8e54834a117ac8cb5a3753e75d9b1161/src/module/message-display/components-metords/SendMessage.ts#L73) 、[contact-list.vue#L620](https://github.com/likaia/chat-system/blob/91fe072a20d0928ff2af6c1bf56cedd0e545d0d5/src/views/contact-list.vue#L620)
+
 移除消息监听
@@ -342,2 +356,2 @@ ```typescript
 
-原插件代码地址：[vue-native-websocket](https://github.com/nathantsoi/vue-native-websocket)
+Vue2版本请移步原插件：[vue-native-websocket](https://github.com/nathantsoi/vue-native-websocket)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

825232

increased by0.31%

Number of lines in readme file

355

increased by4.11%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes