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. model中设置默认值时 ，使用 lambda 与否的差别以及datetime的默认值方法

    'date': '2013-01-01'  #固定值 'date': time.strftime('%Y-%m-%d')  #启动时候的值 'date': lambda *a: time.strfti ...

  2. 1、第一个JSP

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" ...

  3. dom与jquery互相转换

    /*取得<input>标签中的value属性的内容[dom对象->jquery对象] var inputElement = document.getElementById(" ...

  4. ASP.NET Web Forms 的 DI 應用範例

    跟 ASP.NET MVC 与 Web API 比起来,在 Web Forms 应用程式中使用 Dependency Injection 要来的麻烦些.这里用一个范例来说明如何注入相依物件至 Web ...

  5. resharper警告 ：linq replace with single call to FirstOrDefault

    使用resharper时对linq使用的FirstOrDefault 一直产生一个警告,

  6. Git Manual / Git使用手册 / Git, GitLab, Git Bash, TortoiseGit （建议全文复制到Word文档中通过导航窗格查看）

    Git使用手册 目录 1     引言 2     Git.GitLab简介 2.1      Git 2.2      GitLab 2.3      Git基本概念 3     运行环境 4    ...

  7. 实战 Lucene，第 1 部分: 初识 Lucene (zhuan)

    http://www.ibm.com/developerworks/cn/Java/j-lo-lucene1/ ******************************************** ...

  8. oracle 使用occi方式 批量插入多条数据

    if (vecInfo.empty()) { ; //数据为空,不上传,不上传标志设置为1,只有0表示上传成功 } std::string strUserName = userName; std::s ...

  9. Python 操作文件、文件夹、目录大全

    # -*- coding: utf-8 -*- import os import shutil # 一. 路径操作:判断.获取和删除 #1. 得到当前工作目录,即当前Python脚本工作的目录路径: ...

  10. 浏览器 本地预览图片 window.url.createobjecturl

    第一种方式 <script type="text/javascript"> function setImagePreview() { var docObj = docu ...