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. 转载【linux】Linux学习之CentOS6.x+7.x---网卡的配置

    转载至:http://www.cnblogs.com/smyhvae/p/3932903.html [正文] Linux系统版本:Centos 6.5 Linux系统版本:Centos 7 目的:将c ...

  2. explain mysql性能优化

    1 使用explain语句去查看分析结果,如   explain select * from test1 where id=1; 会出现: id  selecttype  table  type po ...

  3. MySQL UUID函数的详解(转)

    MySQL UUID函数的详解 MySQL中可以有二类用于生成唯一值性质的工具:UUID()函数和自增序列,那么二者有何区别呢?我们就此对比下各自的特性及异同点: l  都可以实现生成唯一值的功能: ...

  4. （Windows Maven项目）Redis数据库的安装和操作实现

              Redis是一个内存数据库,他会把你写入当中的数据缓存到内存中,之后会周期性的往磁盘中写入.这篇文章中介绍的是在Windows环境下利用Maven工具编译运行Java文件实现Red ...

  5. xdebug远程调试原理分析

    xdebug可以控制PHP程序的执行,这意味着xdebug可以在任何时候暂停或者恢复正在运行的PHP程序.当PHP程序被暂停的时候,xdebug可以获取到程序的有关 信息,比如变量的值等.xdebug ...

  6. linux学习知识

    一.用户,用户组 http://os.51cto.com/art/201003/187533.htm http://www.cnblogs.com/zhoug2020/archive/2012/02/ ...

  7. JVM 参数详解

    1.使用$JAVA_HOME/bin/java  可看到所有参数说明 用法: java [-options] class [args...] (执行类) 或 java [-options] -jar ...

  8. Redis(十七)：批量操作Pipeline

    大多数情况下,我们都会通过请求-相应机制去操作redis.只用这种模式的一般的步骤是,先获得jedis实例,然后通过jedis的get/put方法与redis交互.由于redis是单线程的,下一次请求 ...

  9. Junit运行在Spring环境下

    @RunWith(SpringJUnit4ClassRunner.class)让测试运行于Spring测试环境 @ContextConfiguration 用来指定加载的Spring配置文件的位置,会 ...

  10. (Spring Boot框架)快速入门

    Spring Boot 系列文章推荐 Spring Boot 入门 Spring Boot 属性配置和使用 Spring Boot 集成MyBatis Spring Boot 静态资源处理 今天介绍一 ...