注：主要的问题是当浏览器窗口直接关闭时，后台会报异常，因为后台还在继续向浏览器端写数据，但是浏览器已经关闭了，会报java.net.SocketException:peer:Socket write error异常。所以当我们把窗口关闭的时候要通知后台不要再向浏览器端写数据了，
但是window.onclose()，经本人验证已经不起作用了（验证过程太尼玛恶心了），所以我采用另一种方法，使用body标签的onbeforeunload事件，这个事件是在页面刷新或者窗口关闭时触发，所以我在其触发函数中写入了 webSocket.close();来通知后台不要再向前段写数据了，然后webSocket连接就会自动断开，就不会有异常了。

前台：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

var webSocket=new WebSocket('ws://localhost:8080/JavaWeb/websocket');

 webSocket.onerror = function(event) {

     onError(event)

   };

   webSocket.onopen = function(event) {

     onOpen(event)

   };

   webSocket.onmessage = function(event) {

     onMessage(event)

   };

   function onMessage(event) {

     document.getElementById('messages').innerHTML

       += '\n' + event.data;

   }

   function onOpen(event) {

     document.getElementById('messages').innerHTML

       = 'Connection established';

   }

   function onError(event) {

     alert(event.data);

   }

        function start() {

          var content= document.getElementById('UserMessage').value;

          //webSocket.send('hello');

          webSocket.send(content);

          return false;

        }

        /*

        window.onclose()方法不管用，采用曲线救国的方法，

                 使用body标签的onbeforeunload事件，当整个页面刷新或把浏览器页面关闭的时候，通知后台断开websocket连接

        */

        function fnUnloadHandler(){

        webSocket.close();

        }

</script>

</head>

<body  onbeforeunload="fnUnloadHandler()">

  <div>

    <input id="UserMessage" type="text">

    <input type="submit" onclick="start()" />

  </div>

  <textarea id="messages" rows="10" cols="20"></textarea>

</body>

</html>

　　

后端：

package WebSocket;

import java.io.IOException;

import java.util.Iterator;

import java.util.Set;

import javax.websocket.OnClose;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket")

public class demo1 {

@OnMessage

public void onMessage(String message,Session session) throws IOException, InterruptedException{

System.out.println("Receive: "+message);

//获取所有客户端的session，然后一旦接收到消息就为每一个客户端发送消息

Set sessions=session.getOpenSessions();

System.out.println(sessions.size());

Iterator it=sessions.iterator();

while(it.hasNext()){

Session s1=(Session) it.next();

s1.getBasicRemote().sendText(message);

}

}

@OnOpen

 public void onOpen() {

   System.out.println("Client connected");

 }

 @OnClose

 public void onClose() {

   System.out.println("Connection closed");

 }

}

　　

基于websocket的页面聊天程序的更多相关文章

  1. SpringBoot基于websocket的网页聊天

    一.入门简介正常聊天程序需要使用消息组件ActiveMQ或者Kafka等,这里是一个Websocket入门程序. 有人有疑问这个技术有什么作用,为什么要有它?其实我们虽然有http协议,但是它有一个缺 ...

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

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

  3. workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）

    workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...

  4. websocket实现简单聊天程序

    程序的流程图: 主要代码: 服务端 app.js 先加载所需要的通信模块: var express = require('express'); var app = express(); var htt ...

  5. 利用TCP协议，实现基于Socket的小聊天程序(初级版)

    TCP TCP (Transmission Control Protocol)属于传输层协议.其中TCP提供IP环境下的数据可靠传输,它提供的服务包括数据流传送.可靠性.有效流控.全双工操作和多路复用 ...

  6. 基于html5 localStorage , web SQL, websocket的简单聊天程序

    new function() { var ws = null; var connected = false; var serverUrl; var connectionStatus; var send ...

  7. .NET Core 基于Websocket的在线聊天室

    什么是Websocket 我们在传统的客户端程序要实现实时双工通讯第一想到的技术就是socket通讯,但是在web体系是用不了socket通讯技术的,因为http被设计成无状态,每次跟服务器通讯完成后 ...

  8. Netty 系列八（基于 WebSocket 的简单聊天室）.

    一.前言 之前写过一篇 Spring 集成 WebSocket 协议的文章 —— Spring消息之WebSocket ,所以对于 WebSocket 协议的介绍就不多说了,可以参考这篇文章.这里只做 ...

  9. 基于WebSocket的简易聊天室

    用的是Flash + WebSocket 哦~ Flask 之 WebSocket 一.项目结构: 二.导入模块 pip3 install gevent-websocket 三.先来看一个一对一聊天的 ...

随机推荐

  1. 七、MySQL 选择数据库

    MySQL 选择数据库 在你连接到 MySQL 数据库后,可能有多个可以操作的数据库,所以你需要选择你要操作的数据库. 从命令提示窗口中选择MySQL数据库 在 mysql> 提示窗口中可以很简 ...

  2. 制定RPM包和加入YUM源

    ##################################################### ##如有转载,请务必保留本文链接及版权信息 ##欢迎广大运维同仁一起交流linux/unix ...

  3. 5.Cisco Packet Tracer里关于交换机或路由器配置文件和系统映像备份与恢复

    我们会将交换机或路由器的配置文件和系统镜像直接备份到tftp服务器上,所以我们需要准备一台tftp的服务器 1我们需要给服务器配一个ip地址,给路由器的f0/1端口配置一个ip地址,路由器与服务器能相 ...

  4. Linux-WebServer安装和配置

    Apache 基本操作 解释 命令 安装 yum install httpd 启动 service httpd start 停止 service httpd stop 启动完成后 查看进程是否存在:p ...

  5. Net core 轮子

    .net core 使用的人渐渐多了起来,轮子也渐渐多了起来,为了避免重复造轮子,以下列举了一些造好的轮子 1. IP 请求频率限制 git: https://github.com/stefanpro ...

  6. .net core 获取浏览器UserAgent

    这两天由于自己公司的机器磁盘不够用了,果断把VS2015卸载了,只留下VS2017 当我打开一个以前一个很简单的MVC4.0的项目时候 温馨提示要安装MVC4,我犹豫了一下,还是点了安装,接下来提示要 ...

  7. Nosql和RDBMS的比较及解释

    概述 传统的关系型数据库以及数据仓库在面对大数据的处理时显得越来越力不从心.因为关系数据库管理系统 (RDBMS)的设计从未考虑过能够处理日益增长且格式多变的数据,以及访问数据并进行分析的用户需求呈爆 ...

  8. bs4的简单应用之防止xss攻击和文本截断

    BeautifulSoup可以过滤html标签,根据这个功能我们可以防止xss攻击和进行文本过滤 1. 安装 pip install beautifulsoup4 2.导入.使用 from bs4 i ...

  9. 动态规划：HDU1224-Free DIY Tour

       Free DIY Tour Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  10. 动态规划：HDU1069-Monkey and Banana

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...