js建立简单socket

JavaScript013

js建立简单socket,第1张

import Stomp from "stompjs"

import SockJS from "sockjs-client"

let stompClient = null

class Socket {

  constructor(socketMsg) {

    this.socketMsg = socketMsg

  }

  /**

  * 向服务器发起websocket连接并发送CONNECT帧

  * @param {object} stompType 与服务器连接通道类型

  * @param {function} callback 回调方法

  */

  static startConnect( callback) {

    // 建立连接对象

    const socket = new SockJS(''连接地址)

    // 获取 STOMP 子协议的客户端对象

    stompClient = Stomp.over(socket)

    // 请求头验证,需要登陆

    const headers = {

      userId: JSON.parse(sessionStorage.getItem("id"))

    }

    // stompClient.debug = () =>{}

    stompClient.connect(

      headers,

      (result) =>{

        console.log("开始连接",result)

        // 订阅队列推送

        stompClient.subscribe('订阅1队列地址', res =>{

          // 收到推送内容

          callback(data)

        })

        // 订阅被邀请

        stompClient.subscribe('订阅2地址', res =>{

          callback(data)

        })

      },

      () =>{

        // console.log(err)

      }

    )

  }

  // 主动发送消息

  static send(data) {

    stompClient.send(data.url, headers, data.sendMsg)

  }

  // 断开连接

  static disconnect() {

    stompClient.disconnect(() =>{

      // console.log("连接关闭")

    })

  }

}

export default Socket

对于域名和服务器的选择上,要看微信小程序制作方是否硬性需要进行绑定开发,如果没有规定绑定开发的话可以自主选择域名和服务器,像这个在阿里云或iisp都是有相关服务的。

具体方法:

先在utils文件夹粘贴一个io的js

然后 npm install wxapp-socket-io

config文件夹下新建一个socket.js,对socket连接进行封装,如下:

const io = require('../utils/io.js')

let url = 'wss://......'

let wsStatus = false

let onSocket = null

export const connect = function(cb){

if(!onSocket){

onSocket = io(url)

onSocket.on('connect', function (res) {

cb(true,onSocket)

wsStatus = true

})

setTimeout(function(){

if(!wsStatus){

cb(false,onSocket)

}

},10000)

}else{

cb(true,onSocket)

}

}

在要引用的页面调用,全局封装订阅方法

let openSocket = require('../../config/socket')

let app = getApp()

let socket = null

Page({

data: {

zl: [[422, 400, 468, 834, 785, 446, 845, 517, 630, 797, 890, 529, 553, 425, 469, 470, 837, 841, 521, 525], [422, 400, 468, 834, 785, 446, 845, 517, 630, 797, 890, 529, 553, 425, 469, 470, 837, 841, 521, 525]]

},onLoad: function () {

let that = this

//socket调用

openSocket.connect(function (status, ws) {

if (status) {

socket = ws            this.subscribe('zl')//对封装好对订阅方法进行调用

socket.on('broadcast', function (msg) {//广播

console.log("broadcast")

console.log(msg)

})

} else {

alert("socket 连接失败")

}

})

},subscribe: function (type) {

if (socket) {

let eis = this.data[type]

if (eis &&eis.length >0) {

let param = {//仅供参考,根据接口自行更改

eis: eis.join(',')

}

socket.emit('subscribe', JSON.stringify(param))

}

}

}})

注:创建一个 WebSocket 连接;一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该连接,并重新创建一个 WebSocket 连接。

前提:你要有socket服务程序,如果服务器上没socket服务,你是没法使用socket服务的。可以通过PHP、nodejs等开发socket服务

new 一个 WebSocket对象

打开端口

发送数据