使用webSocket，模拟h5聊天

样式就不多说了吧，相信大家都会搭建的。直接看代码

export default {
    data() {
        return {
            ws: null, //服务器连接
            chatList:[],//消息列表
        }
    },
    mounted() {
        this.webSocket();
    },
    methods: {
        webSocket() {
            var that = this;
            const supportsWebSockets = "WebSocket" in window || "MozWebSocket" in window; //判断是否支持webSocket
            this.ws = new WebSocket("wss://www.hqbnet.cn:9501/Swool/public/index.php/swool/Websocket/open? + 后台所需的参数");
        
            if (supportsWebSockets) {
                //建立WebSocket连接（ip地址换成自己主机ip）
                this.ws.onopen = function () {
                    // alert('服务器连接成功',{shade:0.1,icon:1,time:600});
                };
                this.ws.onerror = function () {
                    // alert('服务器连接失败',{shade:0.1,icon:2,time:600});
                };
                this.ws.onmessage = function (evt) {
                    if (data.status == 1) { 
                        //接受成功
                            //根据后台返回的值进行判断
                            //做一些成功之后的操做
                            //主要的有dom操作，
                            that.chatList.push('返回的值'); //消息列表
                            setTimeout(() => {  //使之滚动到底部
                                $("#list")
                                    .children("div:last-child")[0]
                                    .scrollIntoView();
                            }, 100);
                    } else { 
                        //接受失败
                            //要先关闭当前的连接
                            that.ws.close();
                            //重新连接
                            that.webSocket();
                    }
                };
            }
        },
        //按回车发送
        keywordFun() {
            var db = {
                //参数
            };
            if ('输入内容' == '') {
                this.$toast("内容不能为空");
                return false;
            } else {
                //调用打发送方法
                this.ws.send(JSON.stringify(db));
            }
        },
    },

}

这样就可以完美的实现聊天的功能，当然后台也是要依赖于webSocket的。