花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo，期间还走过了一段“看似弯曲”的道路，但是我想其实也不算是弯路吧，因为你走过的路必将留下你的足迹。这个小demo看似简单，但是这一路走来自己也是花了不少心思才将其完成，今天就和大家一起分享一下。

刚刚接手这个任务时，我就想能不能使用Node.js来编写聊天室的服务器端，而后才发现这样做却存在“跨域问题”，因为你的前台是部署在Tomcat服务器上的，所以前台和后台的数据无法进行直接的交互，虽然可以间接的进行交互但是却不容易，在此不建议大家采用此种方法，可直接采用Java+html实现网页版聊天室。我将首先介绍客户端的构造而后介绍服务器端：

客户端

【1】 页面的编写（使用HTML编写）

<body>

         <div class="container">

         <center><h1>欢迎光临聊天室 </h1></center>

           <div id="message"></div>

             昵称： <input id="username" type="text"/>

             内容： <input id="text" type="text" style="width:300px"/>

        <button onclick="send()">发送</button>

        <button onclick="closeWebSocket()">退出聊天室</button>

        </div>

  </body>

说明：

  1. 在此我首先放置了一个ID 名为message的div用来显示存放的消息
  2. 然后我放置了两个input标签：一个存放昵称，另一个存放用户要发出去的昵称
  3. 最后设置两个按钮用来发送消息和退出聊天
    【2】页面的脚本编写
    <script type="text/javascript">

      var websocket = null;

      //判断当前浏览器是否支持WebSocket

      if('WebSocket' in window){

          websocket = new

          地址格式是：主机名+项目名+客户端注明的名称

      WebSocket("ws://localhost:8080/Chat_01/websocket");

      }

      else{

          alert('您的浏览器不支持 websocket！')

      }  

      //连接发生错误的回调方法

      websocket.onerror = function(){

          setMessageInnerHTML("error");

      };  

      //连接成功建立的回调方法

      websocket.onopen = function(event){

          alert("链接成功,欢迎加入聊天室！");

      }  

      //接收到消息的回调方法

      websocket.onmessage = function(event){

          setMessageInnerHTML(event.data);

      }  

      //连接关闭的回调方法

      websocket.onclose = function(){

          var username=document.getElementById('username').value;

          setMessageInnerHTML(getNowFormatDate()+" "+username+" 退出了聊天室！");

      }  

      //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

      window.onbeforeunload = function(){

          websocket.close();

      }  

      //将消息显示在网页上

      function setMessageInnerHTML(innerHTML){

          document.getElementById('message').innerHTML += innerHTML + '';

      }  

      //关闭连接

      function closeWebSocket(){

          websocket.close();

      }  

      //发送消息

      function send(){

          var username=document.getElementById('username').value;

          var message = document.getElementById('text').value;

          websocket.send(getNowFormatDate()+" "+username+"说: "+message+"<br/>");

          //发送消息后，发送消息框自动清空

          document.getElementById('text').value="";

      }  

      function getNowFormatDate() {

          var myDate = new Date();

          myDate.getYear();        //获取当前年份(2位)

          myDate.getFullYear();    //获取完整的年份(4位,1970-????)

          myDate.getMonth();       //获取当前月份(0-11,0代表1月)

          myDate.getDate();        //获取当前日(1-31)

          myDate.getDay();         //获取当前星期X(0-6,0代表星期天)

          myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)

          myDate.getHours();       //获取当前小时数(0-23)

          myDate.getMinutes();     //获取当前分钟数(0-59)

          myDate.getSeconds();     //获取当前秒数(0-59)

          myDate.getMilliseconds();    //获取当前毫秒数(0-999)

          myDate.toLocaleDateString();     //获取当前日期

          var mytime=myDate.toLocaleTimeString();     //获取当前时间

         return myDate.toLocaleString( );        //获取日期与时间

        }

  </script>

说明：以上几个方法例如onclose，onmessage均是websocket自带的方法，大家只需要在websocket文档上查看各个函数是什么功能。

服务器端

import java.io.IOException;

import java.util.concurrent.CopyOnWriteArraySet;  

import javax.websocket.OnClose;

import javax.websocket.OnError;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;  

//该注解用来指定一个URI，客户端可以通过这个URI来连接到WebSocket。类似Servlet的注解mapping。无需在web.xml中配置。

@ServerEndpoint("/websocket")

public class MyWebSocket {

  // 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。

  private static int onlineCount = 0;  

  // concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识

  private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();  

  // 与某个客户端的连接会话，需要通过它来给客户端发送数据

  private Session session;

  @OnOpen

  public void onOpen(Session session) {

    this.session = session;

    webSocketSet.add(this); // 加入set中

    addOnlineCount(); // 在线数加1

    System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());

  }  

  /**

   * 连接关闭调用的方法

   */

  @OnClose

  public void onClose() {

    webSocketSet.remove(this); // 从set中删除

    subOnlineCount(); // 在线数减1

    System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());

  }  

  @OnMessage

  public void onMessage(String message, Session session) {

    System.out.println("来自客户端的消息:" + message);  

    // 群发消息

    for (MyWebSocket item : webSocketSet) {

      try {

        item.sendMessage(message);

      } catch (IOException e) {

        e.printStackTrace();

        continue;

      }

    }

  }

  @OnError

  public void onError(Session session, Throwable error) {

    System.out.println("发生错误");

    error.printStackTrace();

  }

  public void sendMessage(String message) throws IOException {

    this.session.getBasicRemote().sendText(message);

    // this.session.getAsyncRemote().sendText(message);

  }

  public static synchronized int getOnlineCount() {

    return onlineCount;

  }

  public static synchronized void addOnlineCount() {

    MyWebSocket.onlineCount++;

  }

  public static synchronized void subOnlineCount() {

    MyWebSocket.onlineCount--;

  }

}

程序中我对重要的部门都标记了注释，相信大家只要稍微看过就可以看懂，在此我就不一一赘述了，大家如果在运行过程中有问题的可以在文章下方进行评论，我们可以一起讨论一下。最后我附上整个项目文件的位置以供小伙伴们下载运行。
百度网盘下载地址：链接：http://pan.baidu.com/s/1pLQbeDP 密码：t2vp

如何利用WebSocket实现网页版聊天室的更多相关文章

  1. 基于WebSocket实现网页版聊天室

    WebSocket ,HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,其使用简单,应用场景也广泛,不同开发语言都用种类繁多的实现,仅Java体系中,Tomcat,Jetty,Sp ...

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

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

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

  4. swoole实验版聊天室

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

  5. HTML5新特性 websocket(重点)--多对多聊天室

    一.html5新特性  websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...

  6. Node.js+websocket+mongodb实现即时聊天室

    ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...

  7. angular版聊天室|仿微信界面IM聊天|NG2+Node聊天实例

    一.项目介绍 运用angular+angular-cli+angular-router+ngrx/store+rxjs+webpack+node+wcPop等技术实现开发的仿微信angular版聊天室 ...

  8. nodejs与websocket模拟简单的聊天室

    nodejs与websocket模拟简单的聊天室 server.js const http = require('http') const fs = require('fs') var userip ...

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

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

随机推荐

  1. PIL-ImageFont：OSError: cannot open resource

    使用PIL时,创建某个字体Font对象时出错: font=ImageFont.truetype('Arial.ttf',36) 可能原因有两个: 1.PIL无法定位到字体文件的位置. 可以通过提供绝对 ...

  2. Chrome：查看用户代理User-Agent

    用户代理(User-Agent)是浏览器客户端与服务器交互时的重要信息之一,用于帮助服务器识别请求用户的浏览器类别,以便于网站发送相应的网页数据. 用户代理数据包括:操作系统标识.加密等级标识和浏览器 ...

  3. c# 导出Excel模板(在项目中有现成的Excel模板)

    在项目中会有导出模板功能,把现成的Excel模板导出去填写之后再进行导入,这里说说怎么导出模板: 模板存放位置: 点击导出模板按钮:  private string currentPath = Pat ...

  4. SHA算法（及示例）演变历史

    安全散列算法(英语:Secure Hash Algorithm,缩写为SHA)是一个密码散列函数家族,是FIPS所认证的安全散列算法.能计算出一个数字消息所对应到的,长度固定的字符串(又称消息摘要)的 ...

  5. CF917D题解

    题目大意 一张有 \(n\) 个节点的完全图,再给出这张图的一棵生成树,问该图有多少颗生成树和这颗生成树的公共边总共有 \(k\) 条,求助 \(0 \leq k \leq n-1\) 时所有 \(k ...

  6. Java基础——Math类

    Math包含执行基本数字运算的方法 没有构造方法的情况下如何使用类中的成员? 看类的成员是否都是静态的,是的话可以直接通过类名调用 Mathl类的常用方法: 方法名 说明 public static ...

  7. QFramework Pro 开发日志（七）v0.4 版本审核通过 与 对话编辑器功能预告

    经过一周的工作,v0.4 版本总算完成了. 就在刚刚笔者在 AssetStore 提交了 v0.4 版本. v0.4 版本主要内容有两个 一键生成简单继承类图功能 底层兼容 QFramework v0 ...

  8. K8S 如何隐藏产品TomCat版本信息

    k8s隐藏TomCat版本信息,通过sidecar方式初始化修改server.xml文件,并挂载到容器中 1.添加initcontainers initContainers: - name: conf ...

  9. tomcat manager status配置

    1. 确保tomcat下原来自带的几个项目未被删掉,tomcat启动时localhost:8080能直接访问tomcat主页 2. 修改tomcat下 conf/tomcat-users-xml文件, ...

  10. Oracle在存储过程中建表、建索引权限不足

    修改存储过程,在存储过程名称后面添加 Authid Current_User 后执行通过. CREATE OR REPLACE PROCEDURE p_test Authid Current_User ...