注：主要的问题是当浏览器窗口直接关闭时，后台会报异常，因为后台还在继续向浏览器端写数据，但是浏览器已经关闭了，会报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. DDOS与DOS的区别

    0x01 在说之前,先看一些例子吧 还有众所周知的中美黑客大战,新闻我就不说了 0x02 什么是DOS DoS是Denial of Service的简称,即拒绝服务,造成DoS的攻击行为被称为DoS攻 ...

  2. H5各种头部meta标签的功能

    <!DOCTYPE html>  H5标准声明,使用 HTML5 doctype,不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta ...

  3. 16.VUE学习之-v-show的使用与v-if的差异对比

    v-show的使用与v-if的差异对比 相同点: 都可以达到隐藏和显示的效果. 不同点: v-show 会用display:none 来隐藏元素节点,推荐使用这种方式 v-if 会移除节点,可以配合v ...

  4. java问题随笔

    1. 类的对象实例化 如何不加static来调用函数2. 如何用当前时间来生成随机数 3.GitHab账号1. java中如何不加static来调用函数? 加static: 表示这个方法为静态方法,在 ...

  5. oracle 事务 锁机制

    原文地址:http://www.cnblogs.com/quanweiru/archive/2013/05/24/3097367.html 本课内容属于Oracle高级课程范畴,内容略微偏向理论性,但 ...

  6. 机顶盒demux的工作原理

    在机顶盒中demux部分相对来说是比较复杂的部分,对于机顶盒软件开发的新手来说通常在这里会遇到一些困难,今天特意研究了一下驱动层代码,有一点自己的理解,因此写下来记录一下学习过程. 机顶盒中数据是如何 ...

  7. Python中函数参数类型和参数绑定

    参数类型 Python函数的参数类型一共有五种,分别是: POSITIONAL_OR_KEYWORD(位置参数或关键字参数) VAR_POSITIONAL(可变参数) KEYWORD_ONLY(关键字 ...

  8. 精简Docker镜像的五种通用方法

    http://dockone.io/article/8163 精简Docker镜像的好处很多,不仅可以节省存储空间和带宽,还能减少安全隐患.优化镜像大小的手段多种多样,因服务所使用的基础开发语言不同而 ...

  9. easyui tree datagrid动态添加表头和表格数据，动态弹出框，修改和删除按钮

    1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...

  10. Java开发配置

    http://www.runoob.com/java/java-environment-setup.html