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);

        }

    }

}

3   3P聊天效果

基于WebSocket实现网页版聊天室的更多相关文章

  1. 如何利用WebSocket实现网页版聊天室

    花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo,期间还走过了一段"看似弯曲"的道路,但是我想其实也不算是弯路吧,因为你走过的路必将留下你的足迹.这 ...

  2. Springboot整合WebSocket实现网页版聊天，快来围观！

  3. 基于websocket实现的web聊天室

    # -*- coding:utf-8 -*- import socket import base64 import hashlib def get_headers(data): "" ...

  4. php基于websocket实现的在线聊天室

    听说websocket技术可以实现 1.

  5. 分享基于 websocket 网页端聊天室

    博客地址:https://ainyi.com/67 有一个月没有写博客了,也是因为年前需求多.回家过春节的原因,现在返回北京的第二天,想想,应该也要分享技术专题的博客了!! 主题 基于 websock ...

  6. SpringBoot基于websocket的网页聊天

    一.入门简介正常聊天程序需要使用消息组件ActiveMQ或者Kafka等,这里是一个Websocket入门程序. 有人有疑问这个技术有什么作用,为什么要有它?其实我们虽然有http协议,但是它有一个缺 ...

  7. 基于 OpenResty 实现一个 WS 聊天室

    基于 OpenResty 实现一个 WS 聊天室 WebSocket WebSocket 协议分析 WebSocket 协议解决了浏览器和服务器之间的全双工通信问题.在WebSocket出现之前,浏览 ...

  8. swoole实验版聊天室

    “swoole实验版聊天室”是依据一堂swoole培训课内容改编的,结合了bootstrap前端框架.redis数据库.jquery框架等实现基本功能,只是体现了swoole的应用,并不是为了专门写个 ...

  9. Django中使用websocket并实现简易聊天室

    django使用websocket并实现简易聊天室 django默认只支持http协议 如果你想让django即支持http协议又支持websocket协议,则需要做以下配置 前期配置 前提需要安装c ...

随机推荐

  1. openerp在ubuntu中查看日志

    sudo su - openerp -s /bin/bash less /var/log/openerp/openerp-server.log

  2. Eclipse wtp project dependent project facets问题

    wtp project会编译成一个war包,但在eclipse里debug时,依赖的project没有自动编译成jar包并打包到war的lib目录里. 原因:依赖project的facets未设置或未 ...

  3. Linux命令-帮助命令:man

    man ls 查看ls命令的帮助信息(输出结果和less命令一样,需要空格,回车,,上箭头,下箭头,PgUp,PgDn,q等方式浏览) 注意:由于这个文件信息量比较大,需要查找某一个字符,输入/,输入 ...

  4. CSS的width:100%和width:auto区别

    CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...

  5. js 字符串拼接 html 累加 html 叠加

    正常来说已经使用es6 的 模板了如`` //页面层 layer.open({ type: 1, content:`<div class="child_card"> & ...

  6. mybatis 参数说明

    1 简单参数 <select id="selectUsers" resultType="User"> select id, username, pa ...

  7. 何时应该使用Directive、Controller、Service？

    AngularJS:何时应该使用Directive.Controller.Service? 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可 ...

  8. jQuery操作CheckBox的方法(选中,取消,取值)

    jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...

  9. SPD

    一般是在内存条上的.1.SPD是SERIAL PRESENCE DETECT的缩写,中文意思是模组存在的串行检测.也即是通过上面讲的IIC串行接口的EEPROM对内存插槽中的模组存在的信息检查.这样的 ...

  10. linux下实现CPU使用率和内存使用率获取方法

    想获取一下目标机运行时linux系统的硬件占用情况,写了这几个小程序,以后直接用了. 方法就是读取proc下的文件来获取了. cpu使用率:    /proc/stat ,内存使用情况:     /p ...