注：主要的问题是当浏览器窗口直接关闭时，后台会报异常，因为后台还在继续向浏览器端写数据，但是浏览器已经关闭了，会报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. [Wolfgang Mauerer] 深入linux 内核架构 第十三章 系统调用

    作为Linux开发爱好者,从事linux 开发有三年多时间.做过bsp移植,熟悉u-boot代码执行流程:看过几遍<linux 设备驱动程序开发>,分析过kernel启动流程,写过驱动,分 ...

  2. linux普通文件权限和系统目录权限的实践及结论

    测试结论:linux普通文件的读.写.执行权限说明 1.可读r:表示具有读取\阅读文件内容的权限 2.可写w:表示具有新增.修改文件内容的权限 1)如果没有r配合,那么vi编辑文件会提示无法编辑(但可 ...

  3. c#:无限极树形结构

    最近一直在研究树形结构菜单,无意中让我弄了出来.先上代码: 首先需要这个的一个类 public class Tree { public int id { get; set; } public stri ...

  4. 27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. <Docker学习>1. 简介

    Q: Dokcer是什么? A: 是一种虚拟化技术.参考https://www.imooc.com/learn/867快速了解Docker. Q: 传统虚拟机技术和Dokcer的区别? A: 传统虚拟 ...

  6. 大数据小项目之电视收视率企业项目08--》MapReduce编写之Wordcount

    编程规范 (1)用户编写的程序分成三个部分:Mapper,Reducer,Driver(提交运行mr程序的客户端) (2)Mapper的输入数据是KV对的形式(KV的类型可自定义) (3)Mapper ...

  7. Leetcode 700. 二叉搜索树中的搜索

    题目链接 https://leetcode.com/problems/search-in-a-binary-search-tree/description/ 题目描述 给定二叉搜索树(BST)的根节点 ...

  8. Birthday Paradox

    Birthday Paradox Sometimes some mathematical results are hard to believe. One of the common problems ...

  9. Java语言基础---逻辑运算（长路短路运算）

    长路短路运算的区别 长路与运算&:是指在两边都是整数时,是逐位与运算,在两边是关系运算时,是逻辑运算. 短路与运算&&:是指从左至右,遇到false,则停止后面的运算. 长路或 ...

  10. 设计模式之第4章-装饰模式(Java实现)

    设计模式之第4章-装饰模式(Java实现) “怎么了,鱼哥?” “唉,别提了,网购了一件衣服,结果发现和商家描述的差太多了,有色差就算了,质量还不好,质量不好就算了,竟然大小也不行,说好的3个X,邮的 ...