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

    //找到 div1 var div1 = document.getElementById("div1"); //创建 一个 p标签 var p = document.createE ...

  2. python 时间加8小时后的时间

    eta_temp = one['arrival'].encode('utf-8') fd = datetime.datetime.strptime(eta_temp, "%Y-%m-%dT% ...

  3. Java 技术栈

    JAVA是一个面向对象的编程语言,由SUN公司的程序员所开发.它不仅吸收了C++的各种优点,而且还撇弃了C++中难以理解的概念,如多继承.指针等:因此JAVA语言具有功能强大且简单易用两个特征, JA ...

  4. JZOJ 5771. 【NOIP2008模拟】遨游

    5771. [NOIP2008模拟]遨游 (File IO): input:trip.in output:trip.out Time Limits: 2000 ms  Memory Limits: 2 ...

  5. Python中的set

    set_lst = [ ('集合容器不可哈希',), ('集合中的元素必须可哈希',), ('集合是无序的',), ('集合自动去重',), ('增',), ('删',), ('查',), ('集合运 ...

  6. Android开发——JVM、Dalvik以及ART的区别

    )预编译也可以明显改善电池续航,因为应用程序每次运行时不用重复编译了,从而减少了 CPU 的使用频率,降低了能耗.

  7. CQRS之旅——旅程5(准备发布V1版本)

    旅程5:准备发布V1版本 添加功能和重构,为V1版本发布做准备. "大多数人在完成一件事之后,就像留声机的唱片一样,一遍又一遍地使用它,直到它破碎,忘记了过去是用来创造更多未来的东西.&qu ...

  8. P3805 【模版】manacher算法（manacher）

    P3805 [模版]manacher算法 题目描述 给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 字符串长度为n 输入输出格式 输入格式: 一行小写英文字符a ...

  9. 如何使用PowerShell管理Windows服务

    [TechTarget中国原创] 作为一名系统管理员,最常见的任务之一就是学会管理Windows服务,这是保证Windows服务器和客户端正常运行的重要内容. 许多操作系统和应用程序都依赖于这些服务. ...

  10. icpc南昌邀请赛 比赛总结

    上周末,我参加了icpc南昌区域赛邀请赛,这也是我的第一次外出参赛. 星期五晚上,在6个小时的火车和1个小时的公交后,我们终于抵达了江西师范大学,这次的比赛场地.江西师范大学周围的设施很齐全,各种烧烤 ...