微信小程序：websocket

服务端

服务器使用的是node.js配置

• 创建node.js环境
  先建立一个新的文件夹server
  下载ws模块：npm install ws
  下载完毕
  

• 引入ws模块的构造函数并实例化
  新建app.js文件，用来编写代码，引入ws模块并且实例化

//引入ws模块的构造函数
var webSocketServer = require("ws").Server;
//实例化
var wss = new webSocketServer({
  port: 3001
});

• 监听前端发送的信息

	//监听客户端的连接
	wss.on("connection",(ws)=>{})
	//监听客户端的信息
 	ws.on("message",(msg)=>{})

• 回发信息

ws.wend("来着客户端的信息"+msg)

完整示例：

//引入ws模块的构造函数
var webSocketServer = require("ws").Server;
//实例化
var wss = new webSocketServer({
  port: 3001
});

//监听客户端连接
wss.on("connection", function (ws) {
  console.log("服务器连接建立成功");
  //监听客户端消息
  ws.on("message", function (msg) {
    console.log(msg.toString());
    ws.send("来自客户端的消息：" + msg);
  })
});

也可另一种写法：在html 页面的URL要改为

url: "ws://127.0.0.1:3000/"

// //引入express
const express=require('express')
const app=express()
const server=require('http').createServer(app)
server.listen(3000,()=>{
  console.log('server is Running');
})

const WebSocketServer = require('ws').Server;
const wss=new WebSocketServer({
  server: server
})

//监听客户端连接
wss.on("connection", function (ws) {
  console.log("服务器连接建立成功");
  //监听客户端消息
  ws.on("message", function (msg) {
    console.log(msg.toString());
    ws.send("来自客户端的消息：" + msg);
  })
});

客户端

• 获取局部网络的地址IP
  获取局部网络的IP十分简单，打开设置，进入网络，点击WiFi属性，在IPv4右侧就能看见IP地址然后，在IP的前面加上ws://尾部加上3001得到可用的IP：
  例如：

ws://1999.213.7.102:3001

• 建立客户端和服务端的连接，并且发送信息，监听服务器回发信息
  在html设置一个按钮，用于获取信息

 <input type="text" placeholder="请输入消息" v-model="msg" />
    <button @tap="sendMessage">发送信息</button>

JS部分建立客户端和服务器的链接，并且发送消息，监听服务器回发消息：

<script>
import "./index.scss";
import Taro from "@tarojs/taro";

export default {
  data() {
    return {
      msg: "",
      socketOpen: false
    };
  },
  methods: {
    sendMessage() {
      console.log(this.msg);
      if (this.socketOpen) {
        console.log(this.msg);
        Taro.sendSocketMessage({
          data: this.msg,
        });
      }
    },
  },
  onLoad: function (option) {
    let msg=this.msg
    Taro.connectSocket({
      url: "ws://192.168.21.122:3001",
      header: {
        "content-type": "application/json",
      },
      protocols: ["protocol1"],
      success: ()=>{
        console.log('客户端连接成功');
        Taro.onSocketOpen(()=>{
          console.log('websocket打开了');
          this.socketOpen=true
          Taro.onSocketMessage((msg)=>{
            console.log(msg);
          })
        })
      }
    });
  },
};
</script>

完整示例：

<template>
  <view>
    <input type="text" placeholder="请输入信息" v-model="msg" />
    <button @tap="sendMessage">发送信息</button>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import "./index.scss";
export default {
  data() {
    return {
      msg: "",
      socketOpen: false
    };
  },
  methods: {
    sendMessage() {
      // console.log(111);
      // console.log(this.msg);
      if (this.socketOpen) {
        console.log(this.msg);
        //通过 WebSocket 连接发送数据。需要先 Taro.connectSocket，并在 Taro.onSocketOpen 回调之后才能发送。
        Taro.sendSocketMessage({
          data: this.msg
        })
      }
    },
  },
  onLoad: function () {
    //与客户端建立连接
    Taro.connectSocket({
      //本地网络连接
      url: "ws://192.168.21.122:3001",
      header: {
        "content-type": "application/json",
      },
      protocols: ["protocol1"],
      success: () => {
        console.log("客户端连接成功");
        //监听 WebSocket 连接打开事件
        Taro.onSocketOpen(() => {
          console.log("websocket打开了");
          this.socketOpen = true;
          //监听 WebSocket 接受到服务器的消息事件
          Taro.onSocketMessage((msg) => {
            console.log(msg);
          });
        });
      },
    });
  },
};
</script>