【Vue】vue使用socket实现一个小的聊天界面

1. 安装Vue的相关环境，并建立一个vue项目

2. 项目中安装socket.io使用命令npm install socket.io

3. 服务端引入http服务，引入socket.io，并设置监听窗口

// 引入http服务
var app = require('http').createServer();
// 引入socket.io
var io = require('socket.io')(app);
// 设置端口
var PORT = 8090;
// 监听端口
app.listen(PORT);

4. 客户端进行socket连接，使用websocket协议

// 端口就是上面监听的8090端口
var socket = io('ws://localhost:8090')

到此，整合完毕，下面开始写自己的逻辑和实现

5. 逻辑流程

1. 客户端获取用户输入的内容，并将内容消息和用户的相关信息（ID、姓名、当前时间）发送给服务端
2. 服务端接受消息，并判断并发送相关事件，并通过广播或点对点的方式将消息给当前连接的所有客户端
3. 客户端收到消息，并判断是否是自己的消息，进行相关显示

6. 服务端简单的案例，vue

<template>
    <div>
        <button @click="send">发消息</button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            path:"ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5",
            socket:""
        }
    },
    mounted () {
        // 初始化
        this.init()
    },
    methods: {
        init: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                this.socket = new WebSocket(this.path)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open: function () {
            console.log("socket连接成功")
        },
        error: function () {
            console.log("连接错误")
        },
        getMessage: function (msg) {
            console.log(msg.data)
        },
        send: function () {
            this.socket.send(params)
        },
        close: function () {
            console.log("socket已经关闭")
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
}
</script>

<style>

</style>