如何利用WebSocket实现网页版聊天室

terro 发布于2019-08-15 11:56 / 1669人阅读

摘要：花了将近一周的时间终于完成了利用完成网页版聊天室这个小，期间还走过了一段看似弯曲的道路，但是我想其实也不算是弯路吧，因为你走过的路必将留下你的足迹。

花了将近一周的时间终于完成了利用WebSocket完成网页版聊天室这个小demo，期间还走过了一段“看似弯曲”的道路，但是我想其实也不算是弯路吧，因为你走过的路必将留下你的足迹。这个小demo看似简单，但是这一路走来自己也是花了不少心思才将其完成，今天就和大家一起分享一下。
刚刚接手这个任务时，我就想能不能使用Node.js来编写聊天室的服务器端，而后才发现这样做却存在“跨域问题”，因为你的前台是部署在Tomcat服务器上的，所以前台和后台的数据无法进行直接的交互，虽然可以间接的进行交互但是却不容易，在此不建议大家采用此种方法，可直接采用Java+html实现网页版聊天室。我将首先介绍客户端的构造而后介绍服务器端：

客户端

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

说明：

在此我首先放置了一个ID 名为message的div用来显示存放的消息

然后我放置了两个input标签：一个存放昵称，另一个存放用户要发出去的昵称

最后设置两个按钮用来发送消息和退出聊天

【2】页面的脚本编写

说明：以上几个方法例如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 webSocketSet = new CopyOnWriteArraySet();  
     
  // 与某个客户端的连接会话，需要通过它来给客户端发送数据  
  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

该链接可能已经失效，有需要的朋友可以发送邮件至280815640@qq.com。感谢您的关注。

混合云专线服务 websocket实现聊天室网页实现即时聊天 webrtc实现网页聊天 webrtc实现网页文字聊天

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/67627.html

如何利用WebSocket实现网页版聊天室

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

EscapedDog 2019-07-23 18:17 评论0 收藏0
如何利用WebSocket实现网页版聊天室

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

用户84 2019-08-21 16:48 评论0 收藏0
如何利用WebSocket实现网页版聊天室

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

gitmilk 2019-08-05 12:09 评论0 收藏0
利用express+socket.io实现一个简易版聊天室

摘要：用伪代码来模拟下长轮询的过程前端利用下面函数进行请求后端代码做如下更改利用随机数的大小来模拟是否有新数据有新数据来了长轮询的确减少了请求的次数，但是它也有着很大的问题，那就是耗费服务器的资源。写在前面最近由于利用node重构某个项目，项目中有一个实时聊天的功能，于是就研究了一下聊天室，在线demo|源码，欢迎大家反馈。这个聊天室的主要利用到了socket.io和express。这个...

Chaz 2019-08-22 10:39 评论0 收藏0
Web 实时推送技术的总结

摘要：本文对过去和现在流行的实时推送技术进行了比较与总结。以上我们介绍了三种实时推送技术，然而各自的缺点很明显，使用起来并不理想，接下来我们着重介绍另一种技术它是比较理想的双向通信技术。前言随着 Web 的发展，用户对于 Web 的实时推送要求也越来越高，比如，工业运行监控、Web 在线通讯、即时报价系统、在线游戏等，都需要将后台发生的变化主动地、实时地传送到浏览器端，而不需要用户手动...

Rocture 2019-08-23 15:53 评论0 收藏0