websocket实现QQ聊天一之二(UI js编写)

墨蓝 2021-06-24 15:57 343阅读 0赞

今天说明一下 websocket实现QQ聊天js代码

说明：根据自己实际情况编写，但是万变不离这几个状态，建议将它封装为单独的js文件，引入

function setMessageInnerHTML(data) {
        $('.newsList').append(data);
    }
    
    var websocket = null;
    var hostUrl="localhost:8080/Jfinal";
    function openSocket() {
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://"+hostUrl+"/webSocketChat.ws");//多人聊天链接简易版
        }else {
            setErrorMessage('当前浏览器 Not support websocket');
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            setErrorMessage("WebSocket连接发生错误");
        };
    
        //连接成功建立的回调方法
        websocket.onopen = function () {
            setErrorMessage("WebSocket连接成功");
        };
    
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            setMessageInnerHTML(event.data);
        };
    
        //连接关闭的回调方法
        websocket.onclose = function () {
            setErrorMessage("WebSocket连接关闭");
        };
    
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closeWebSocket();
        };
    }
    //发送消息
    function send(message) {
        websocket.send(message);
    }
    function setErrorMessage(message) {
        $('.newsList').append(message);
    }
    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }
    openSocket();

好了，前后端都已经完结，下一章说明一下后端几个类的功能

发表评论取消回复

表情：

评论列表（有 0 条评论，343人围观）

还没有评论，来说两句吧...

相关阅读

相关【WebSocket】SpringBoot整合WebSocket实现聊天室（一）

目录一、准备 1、引入依赖 2、创建配置类二、相关注解 -------------------- 一、准备 1、引入依赖首先我们需要在项目中引入依

妖狐艹你老母/ 2023年10月13日 13:27/ 0 赞/ 71 阅读

相关 “编程式 WebSocket” 实现简易 online QQ在线聊天项目

目录一、需求分析与演示 1.1、需求分析 1.2、效果演示二、客户端、服务器开发 2.1、客户端开发 2.2、服务器开发 ------------------

清疚/ 2023年09月26日 20:41/ 0 赞/ 130 阅读

相关 SpringBoot、Websocket、Vue.js实现在线聊天

SpringBoot、Websocket、Vue.js实现在线聊天写在前面 1. 导入相关jar包 2. 准备一些配置

今天药忘吃喽~/ 2022年10月05日 05:50/ 0 赞/ 270 阅读

相关【java】webSocket（二）——实时聊天

一、前言在上一篇博客中，小编简单向大家介绍了一下websocket，在这篇博客中小编将通过一个聊天实例来展示一下websocket是如何使用的。二、资

冷不防/ 2022年06月16日 14:52/ 0 赞/ 269 阅读

相关网页实时聊天之PHP实现websocket

原文地址：[https://www.cnblogs.com/zhenbianshu/p/6111257.html][https_www.cnblogs.com_zhenbian

绝地灬酷狼/ 2022年05月03日 23:36/ 0 赞/ 241 阅读

相关 WebSocket实现在线聊天

这一篇文章前面部分我们会先介绍WebSocket协议的基本知识，在最后我们会用Spring Boot来集成WebSocket实现一个简单的在线聊天功能,单纯想看实现部分的话可以

Dear 丶/ 2022年02月24日 11:22/ 0 赞/ 410 阅读

相关 Node.js实现WebSocket聊天室的例子

对于聊天室，大家应该都不陌生，笔者也写过很多关于聊天室的例子。本节，我们将演示如何通过Node.js来实现一个WebSocket聊天服务器的例子。使用ws创建WebS

水深无声/ 2022年01月23日 12:11/ 0 赞/ 287 阅读

相关 websocket(二)：SSM+websocket的聊天室

在github上面找了一个看起来还不错的网页版聊天室，基于ssm加websocket实现的，特此分享一下，github地址放在文章末尾，大家可以自行下载跑起来玩玩，项目如何跑起

墨蓝/ 2022年01月06日 03:11/ 0 赞/ 483 阅读

相关 websocket实现QQ聊天一之二(UI js编写)

今天说明一下 websocket实现QQ聊天js代码说明：根据自己实际情况编写，但是万变不离这几个状态，建议将它封装为单独的js文件，引入 function se

墨蓝/ 2021年06月24日 15:57/ 0 赞/ 344 阅读

相关 websocket实现QQ聊天一之一(服务端编写)

下面介绍一个完整的websocket案例,案例实现socket获取HttpSession，和数据库用户实现绑定一，后端涉及四个java类 ![Center][]

小灰灰/ 2021年06月11日 15:10/ 0 赞/ 522 阅读