websocket入门

 

1. python作为服务端代码

 

cat web.py

from flask import Flask
import time
from flask_socketio import SocketIO,emit

app = Flask(__name__)

socketio = SocketIO()
socketio.init_app(app)


"""
对socketio进行一些监听设置
"""

@socketio.on('add',namespace='/testnamespace')
def give_response(message):

    print(message)
    emit('response',{'code':'200','msg':'start to process...'})

    time.sleep(2)
    emit('response',{'code':'200','msg':'processed'})

@socketio.on("get",namespace='/testnamespace')
def get_response(message):
    print(message)

    emit('response',{'code':'200','msg':'start to process...'},namespace="/testnamespace")

    socketio.sleep(2)
    emit('response',{'code':'200','msg':'processed'},namespace="/testnamespace")

if __name__ == '__main__':
    socketio.run(app,debug=True,host='0.0.0.0',port=5000)


## message 是接受到客户端发送过来的消息
## emit是发送给客户端的消息, response要客户端接受这个event

 

2. 客户端配置

2.1 安装websocket

cnpm install -S vue-websocket

2.2 配置

import VueWebsocket from "vue-websocket"

Vue.use(VueWebsocket,"ws://127.0.0.1:5000/testnamespace")


<script>
  export default {

    methods: {
      add() {
        // Emit the server side
        this.$socket.emit("add", { a: 5, b: 3 });
      },

      get() {
        this.$socket.emit("get", { id: 12 }, (response) => {
          console.log(response);
        });

        // this.$socket.on("response",(response) => {
        //   console.log(response + "ddddd");
        // });
      }
    },

    socket: {
      // Prefix for event names
      // prefix: "/counter/",

      // If you set `namespace`, it will create a new socket connection to the namespace instead of `/`
      // namespace: "/counter",

      events: {

        // Similar as this.$socket.on("changed", (msg) => { ... });
        // If you set `prefix` to `/counter/`, the event name will be `/counter/changed`
        //
        changed(msg) {
          console.log("Something changed: " + msg);
        },

        response(msg) {  #response event和服务端一致
          console.log(msg);
          console.log("response: " + msg.msg);
        }

        /* common socket.io events
                connect() {
                    console.log("Websocket connected to " + this.$socket.nsp);
                },

                disconnect() {
                    console.log("Websocket disconnected from " + this.$socket.nsp);
                },

                error(err) {
                    console.error("Websocket error!", err);
                }
                */

      }
    }
  };

</script>