正文

基于websocket实现网页版聊天室(代码片段)

chenbenbuyi  chenbenbuyi  2022-12-05  270

关键词：

　　WebSocket ，HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，其使用简单，应用场景也广泛，不同开发语言都用种类繁多的实现，仅Java体系中，Tomcat,Jetty，Spring等都提供了对WS的API支持。本篇不做理论探究，仅自娱自乐，简单实现网页版的聊天室功能，在实际开发场景中变通使用即可。废话不叽歪，直接撸出来——

1 简单页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HanppyRoom</title>
    <script>
        var url = "ws://" + window.location.host + "/page_room/";
        var ws = null;
        //加入聊天室
        function joinRoom() 
            if (ws) 
                alert("你已经在聊天室，不能再加入");
                return;
            
            var username = document.getElementById("user").value;
            ws = new WebSocket(url + username);
            //与服务端建立连接触发
            ws.onopen = function () 
              console.log("与服务器成功建立连接")
            ;
            //服务端推送消息触发
            ws.onmessage = function (ev) 
                talking(ev.data);
            ;

            //发生错误触发
            ws.onerror = function () 
                console.log("连接错误")
            ;
            //正常关闭触发
            ws.onclose = function () 
                console.log("连接关闭");
            ;
        

        //退出聊天室
        function exitRoom() 
            closeWebSocket();
        

        function sendMsg() 
            if(!ws)
                alert("你已掉线，请重新加入");
                return;
            
            //消息发送
            ws.send(document.getElementById("sendMsg").value);
            document.getElementById("sendMsg").value = "";


        

        function closeWebSocket() 
            if(ws)
                ws.close();
                ws = null;
            
        

        function talking(content) 
            document.getElementById("content").append(content + "\r\n");
        
    </script>
</head>
<body>
<div style="text-align: center;background-color: rgba(129,86,255,0.35);margin:0 auto;border:1px solid #000;width:600px;height:650px">
    <br>欢迎使用<strong>陈本布衣</strong>牌极简聊天室：<br/><br/>
    <textarea id="content" cols="60" rows="30" readonly="readonly"></textarea><br>
    <input type="text" id="sendMsg">
    <button type="button" onclick="sendMsg()">发送消息</button>
    <br/><br/>
    用户：<input type="text" id="user">
    <button onclick="joinRoom()">加入群聊</button>
    <button onclick="exitRoom()">退出群聊</button>
</div>
</body>
</html>

2 后端实现

/**
 * @ServerEndpoin 注解声明该类为 WebSocket 的服务端端点
 * value 值为监听客户端访问的 URL
 */
@ServerEndpoint(value = "/page_room/username")
public class WsByTomcat 

    //这里只是简单测试用，真正的场景请考虑线程安全的容器或其它并发解决方案
    private static List<Session> sessions = new ArrayList<>();

    /**
     * @param session  与客户端的会话对象【可选】
     * @param username 路径参数值 【可选】
     * @throws IOException
     * @OnOpen 标注此方法在 ws 连接建立时调用，可用来处理一些准备性工作 可选参数
     * EndpointConfig（端点配置信息对象） Session 连接会话对象
     */
    @OnOpen
    public void OnOpen(Session session, @PathParam("username") String username) throws IOException 
        sessions.add(session);
        sendTextMsg("好友 [" + username + "] 加入群聊");
    

    /**
     * @param msg      接受客户端消息
     * @param username RESTful 路径方式获取用户名
     * @throws IOException
     * @OnMessage 在收到客户端消息调用 消息形式不限于文本消息，还可以是二进制消息(byte[]/ByteBuffer等)，ping/pong 消息
     */
    @OnMessage
    public void OnMsg(String msg, @PathParam("username") String username) throws IOException 
        sendTextMsg(username + "：\r\n" + msg);
    


    /**
     * @OnClose 连接关闭调用
     */
    @OnClose
    public void OnClose(Session session, @PathParam("username") String username) throws IOException 
        sessions.remove(session);
        sendTextMsg("好友 ["+username + "] 退出群聊");
    

    /**
     * @param e 异常参数
     * @OnError 连接出现错误调用
     */
    @OnError
    public void OnError(Throwable e) 
        e.printStackTrace();
    

    private void sendTextMsg(String msg) 
        for (Session session : sessions) 
            session.getAsyncRemote().sendText(msg);

springboot+websocket学习(代码片段)

Springboot+WebSocket聊天室项目WebSocket介绍WebSocket的特点webSocket协议客户端(浏览器)实现websocket对象websocket事件WebSocket方法服务端实现服务端如何接受客户端发送过来的数据呢?服务端如何推送数据给客户端呢?基于WebSocket的网页聊... 查看详情

(二十)atp应用测试平台——websocket实现微服务版在线客服聊天室实战案例(代码片段)

前言在前面的博客内容中我们介绍了如何使用websocket实现一个网页版的在线客服聊天室，众所周知，由于websocket是一个长连接，要和服务端保持会话连接，所以其本身并不适用于微服务环境，在微服务环境中&#... 查看详情

基于serverless与websocket的聊天工具实现(代码片段)

传统业务实现Websocket并不难，然而函数计算基本上都是事件驱动，不支持长链接操作。如果将函数计算与API网关结合，是否可以有Websocket的实现方案呢？API网关触发器实现WebsocketWebSocket协议是基于TCP的一种新的网络协议。它实现... 查看详情

vue使用websocket模拟实现聊天功能-简易版(代码片段)

vue使用WebSocket模拟实现聊天功能-简易版效果展示两个浏览器相互模拟1.创建模拟node服务在vue根目录下创建server.js文件模拟后端服务器**在server终端目录下载**npminstall--sws2.编写server.js文件代码如下varuserNum=0;//统计在线人数varchat... 查看详情

基于websocket实现一个简单的网站在线客服聊天室案例(代码片段)

...一个聊天室，进行客服解答功能，本节我们使用websocket实现一个简单的网站在线客服聊天功能，效果如下：正文后端引入websocket的pom依赖<dependency> <groupId>org.springframewor 查看详情

基于swoole的网页一对一实时聊天(代码片段)

...看聊天记录以及离线留言，新消息提醒。核心技术html5的websocket，php的swoole扩展http://wiki.swoole.com/数据表CREATETABLE`msg`(`id`int(11)NOTNULLAUTO_INCREMENT,`content`varchar(255)NOTNULLDEFAULT‘‘COMMENT‘内容‘,`tid`i 查看详情

flask基于websocket的简单聊天室(代码片段)

1、安装gevent-websocketpipinstall-ihttps://pypi.tuna.tsinghua.edu.cn/simple/gevent-websocket2、chat.py文件内容如下：fromflaskimportFlask,request,render_templateimportjsonfromgeventwebsocket.handlerimportWebSocke 查看详情

使用websocket实现聊天室(代码片段)

WebSocketnewWebSocket("服务器地址")//创建WebSocket//open:当webSocket服务连接成功时触发socket.addEventListener('open',funtion())Websocket事件open连接建立时触发message客户端接收服务端数据时触发error通讯发生错误时触发close连接关闭时... 查看详情

web在线聊天室(12)---收发消息（单例模式+阻塞式队列）(代码片段)

目录websocket的理解基于代码理解理论上的实现异步，事件驱动，io模型的理论原理websocket协议的原理服务器接收消息的处理方式存在问题解决方案处理消息的仓库messageCenter服务器webSocket实现效果websocket的理解基于代码理... 查看详情

[已解决]基于websocket开发聊天室应用

WebSocket示例java的比较少，大部分是nodejs的，比较有名的是socket.io的chat，借用下他的前端实现一套java的，后端基于nimbleio实现的WebSocket编写，直接上代码：publicvoidaccept(Sessionsession,ReadFuturefuture)throwsException{if(futureinstanceofHttpReadFutur 查看详情

ws模块指南+vue在线聊天室(代码片段)

简介ws模块是Node端的一个WebSocket协议的实现,该协议允许客户端(一般是浏览器)持久化和服务端的连接.这种可以持续连接的特性使得WebScoket特别适合用于适合用于游戏或者聊天室等使用场景.ws模块相较于其他基于WebSocket协议的模... 查看详情

在线聊天——websocket简介与实际实现(代码片段)

...器和服务器的通信都是通过HTTP协议进行的，那么引入WebSocket有什么用呢？想像一下，有一个网页正在用文字直播某一场足球比赛的比分，在没有WebSocket时，客户端也就是浏览器实现比分的动态更新通常通过下... 查看详情

vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版(代码片段)

...ini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat，实现了发送消息、表情(动图)，图片、视频预览，右键菜单、截屏、截图可直接粘贴至文本框进行发送。二、技术框架MVVM框架：Vue2.5.6状态管理... 查看详情

swoole+redis+websocket实现点对点即时聊天(代码片段)

Swoole+Redis+webSocket实现点对点即时聊天场景webSocket服务端代码前端代码场景Swoole+Redis+webSocket实现点对点即时聊天。webSocket服务端代码我们需要通过LaravelCommand来实现,因为Swoole只能运行在PHPCLI模式下。1.生成Command类phpart... 查看详情

swoole+redis+websocket实现点对点即时聊天(代码片段)

springboot整合websocket实现简单聊天室(代码片段)

项目结构：效果展示：实现步骤步骤一：添加依赖<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency> 查看详情

springboot——springboot集成websocket实现简单的多人聊天室(代码片段)

文章目录：1.什么是WebSocket？2.Java中的WebSocketAPI2.1WebSocket开发中的相关注解及API方法2.2前端技术对WebSocket的支持3.多人聊天室的实现源码3.1pom文件中添加相关依赖2.2在核心配置文件中配置视图解析器2.3加入相关静态资源文... 查看详情

十.netty入门到超神系列-基于websocket开发聊天室(代码片段)

...的网站中都嵌入有聊天功能，最理想的方式就是使用WebSocket来开发，屏幕面前的你如果不清楚WebSocket的作用可以自己去百度一下，Netty提供了WebSocket支持，这篇文章将使用Netty作为服务器，使用WebSocket开发一个... 查看详情