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. 解析drupal_render()

    drupal_render()函数接收一个结构化的数组作为参数,然后调用theme()输出HTML. function drupal_render(&$elements) { ... ... ...

  2. XMPP协议实现即时通讯底层书写 （二）-- IOS XMPPFramework Demo+分析

    我希望,This is a new day! 在看代码之前,我认为你还是应该先整理一下心情,来听我说几句: 首先,我希望你是在早上边看这篇blog,然后一边開始动手操作,假设你仅仅是看blog而不去自 ...

  3. centos 配置 samba 与windows共享文件夹

    yum install samba /etc/samba/smb.conf directory mask = 0777 ← 指定新建目录的属性(以下4行) force directory mode = ...

  4. FFmpeg 向视频中添加文字

    原文地址:http://www.cnblogs.com/wanggang123/p/6707985.html FFmpeg支持添加文字功能,具体如何将文字叠加到视频中的每一张图片,FFmpeg调用了文 ...

  5. 从JavaScript 数组去重看兼容性有关问题，及性能优化（摘自玉伯博客）

    JavaScript 数组去重经常出现在前端招聘的笔试题里,比如: 有数组 var arr = ['a', 'b', 'c', '1', 0, 'c', 1, '', 1, 0],请用 JavaScr ...

  6. X86平台简称

    1.PCH:PCH全称为Platform Controller Hub,是intel公司的集成南桥.AMD SB700/710/750  http://support.amd.com/TechDocs ...

  7. Android实战简易教程-第二十三枪（基于Baas的用户注冊验证username是否反复功能！）

    接上一篇,加入验证用户名是否已经注冊功能! 仅仅须要改动MainActivity.java: package com.example.logintest; import java.util.List; ...

  8. windows 和 linux 安装 scrapyd 出现Not a directory site-packages/scrapyd-1.0.1-py2.7.egg/scrapyd/txapp.py

    1  这是因为 scrapyd安装的时候没有 解压 对应的 egg而导致的文件找不到的错误. 2 解决的方法,找到 scrapyd-1.0.1-py2.7.egg 解压缩 里面 有一个  scrapy ...

  9. python内置函数之print()

    定义:将值打印到一个流对象,或者默认打印到sys.stdout. 语法: print(value, ..., sep=' ', end='\n', file=sys.stdout, flush=Fal ...

  10. js to json字符串

    var last=obj.toJSONString(); //将JSON对象转化为JSON字符 或者 var last=JSON.stringify(obj); //将JSON对象转化为JSON字符