socket.io的使用(前端)

socket.io的使用

项目中需要实时接收后端返回的数据,因此决定采用websocket通信方式来完成需求,与后端沟通后采用socket.io来实现websocket通信。

1. socket.io与websocket的区别

首先来介绍一下socket.io与websocket的区别

WebSocket是应用层协议

WebSocket是HTML5新增的一种通信协议,其特点是服务端可以主动向客户端推送信息,客户端也可以主动向服务端发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

Socket.io是一个框架

Socket.io完全由JavaScript实现、基于Node.js、支持WebSocket协议用于实时通信、跨平台的开源框架,它包括了客户端的JavaScript和服务器端的Node.js。也就是说Socket.io将Websocket和轮询(Polling)机制以及其它的实时通信方式封装成了通用的接口,并且在服务端实现了这些实时通信机制。

总结:Socket.io中主要使用了websocket,将轮询作为其辅助选项,提供的是相同的接口。其与node.js一样,也是事件驱动的

2.socket.io的使用

安装准备


npm install socket.io

npm install socket.io-client

这里我选用的是socket.io-client,参考的是socket.io的官方文档

引入


import io from 'socket.io-client';

使用

js文件

import store from "./store";
/* 引入vuex,这里是独立的js文件,因此需要引入js文件而不是vuex */
import io from 'socket.io-client';
/**
 * @Description: 建立socket连接
 * @name: createConnect
 * @param {*} path 传入格式模板'localhost:8080',连接地址,当传入为空时会取域名
 * @return {*}
 */
export function createConnect(path) {
  if (Object.keys(store.state.sockets).length === 0) {
    /* 判断vuex中是否已经存在socket对象,存在证明已经连接直接返回socket对象,避免重复连接 */
    let origin ='localhost:8080'//后端提供的地址
    let socket = io('ws://' + origin);/* 建立连接 */
    store.dispatch('XXXX', socket);/* 把返回的对象存入vuex中 */
  }
  return store.state.sockets/* 返回vuex中保存的socket对象 */
}
/**
 * @Description: 断开socket连接
 * @name: disconnect
 * @param {*} 
 * @return {*}
 */
export function disconnect() {
  if (Object.keys(store.state.socket.sockets).length !== 0) {
    /* 判断vuex中是否已经存在socket对象,存在证明连接中,需断开连接 */
    store.state.socket.sockets.close()
  }
  store.dispatch('GetSocket', {});/* 清空vuex中的socket对象 */
}

vue文件

<template></template>
<script>
import { createConnect, disconnect } from './socket.js';/* 引入方法 */
export default {
  data(){
    return{
      socket:{},
    }
  }
  mounted(){
    // 建立socket连接
    this.sockets = createConnect();
    //监听
    this.sockets.on('connect', () => {
      //监听连接是否成功
      console.log('connect');
    });
    this.sockets.on('disconnect', (reason) => {
      //监听连接异常中断
      console.log(reason);
    });
    this.sockets.on('XXXX', (data) => {
      //监听后端返回事件,XXXX是与后端约定的字段
      console.log('XXXX',data);
    });
  }destroyed() {
    //断开连接,需要时再执行
    disconnect();
  },
}
</script>

  • 8
    点赞
  • 60
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值