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. SQL server 2008里面通过sys.dm_exec_procedure_stats得到存储过程的执行信息--转

    --转自:http://blogs.msdn.com/b/apgcdsd/archive/2011/05/13/sql-server-2008-sys-dm-exec-procedure-stats. ...

  2. 【Linux】touch命令

    用途 touch命令参数可更改文档或目录的日期时间,包括存取时间和更改时间. 全称 touch全称即为touch 参数 -a   :或--time=atime或--time=access或--time ...

  3. Overlapped I/O模型深入分析(转)

    随笔 - 262  文章 - 0  评论 - 531  博客园  首页  新随笔  联系  管理  订阅  Overlapped I/O模型深入分析(转) 简述:    Overlapped I/O也 ...

  4. android 自己定义组合控件

    自己定义控件是一些android程序猿感觉非常难攻破的难点,起码对我来说是这种,可是我们能够在网上找一些好的博客关于自己定义控件好好拿过来学习研究下,多练,多写点也能找到感觉,把一些原理弄懂,今天就讲 ...

  5. 加速nginx: 开启gzip

    nginx 是一个高性能的 Web 服务器,之前也写过一些关于 nginx 的文章.为了提高博客的响应速度,可以从设置 nginx 的 gzip 和缓存这2方面入手.为字体开启 gzip 和缓存能大大 ...

  6. 增强基本选择器[selector_3.html]

    增强基本选择器[selector_3.html] $("ul li:first") $("ul li:last") $("table tr:even& ...

  7. PHP位运算符(转)

    例子 名称 结果 $a & $b And(按位与) 将在 $a 和 $b 中都为 1 的位设为 1. $a | $b Or(按位或) 将在 $a 或者 $b 中为 1 的位设为 1. $a ^ ...

  8. Python3 isidentifier() 方法

    描述 Python3 isidentifier() 方法用于判断字符串是否是有效的 Python 标识符,可用来判断变量名是否合法. 语法 isidentifier() 方法语法: S.isident ...

  9. node.js 连接 mysql

    var mysql = require("mysql"); var connection = mysql.createConnection({ host: '127.0.0.1', ...

  10. 深入浅出ObjC之消息 （转）

    在入门级别的ObjC 教程中,我们常对从C++或Java 或其他面向对象语言转过来的程序员说,ObjC 中的方法调用(ObjC中的术语为消息)跟其他语言中的方法调用差不多,只是形式有些不同而已. 譬如 ...