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

    #!/bin/sh # WARNING: REQUIRES /bin/sh # # - must run on /bin/sh on solaris 9 # - must run on /bin/sh ...

  2. php短网址生成算法

    <?php //短网址生成算法 class ShortUrl { //字符表 public static $charset = "0123456789ABCDEFGHIJKLMNOPQ ...

  3. tp5查询

    TP5的EXP.批量查询.聚合查询等. <!--more--> //使用EXP条件表达式,表示后面是原生的SQL表达式 $result = Db::table('think_inno')- ...

  4. OpenCV学习笔记（四） Mat的简单操作

    转自:OpenCV Tutorial: core 模块. 核心功能 改变图像对比度和亮度:convertTo 可以把  看成源图像像素,把  看成输出图像像素.这样一来,调整亮度和对比度的方法可表示为 ...

  5. codeforce GYM 100741 A Queries

    A. Queries time limit per test:0.25 s memory limit per test:64 MB input:standard input output:standa ...

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

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

  7. 赢友网络通用框架V10.0.0（WinuAppSoft) 基础框架设计表

    /* * 版权所有:赢友网络(http://www.winu.net/) * 开发人员:新生帝(JsonLei) * 设计名称:赢友网络通用框架V10.0.0(WinuAppSoft) * 设计时间: ...

  8. OpenStack之虚机热迁移

    OpenStack之虚机热迁移 最近要搞虚机的热迁移,所以也就看了看虚机迁移部分的内容.我的系统是CentOS6.5,此处为基于NFS共享平台的虚机迁移.有关NFS共享服务器的搭建可以看这里. Yak ...

  9. 【Remove Nth Node From End of List】cpp

    题目: Given a linked list, remove the nth node from the end of list and return its head. For example, ...

  10. java包、类、方法、属性、常量命名规则

    必须用英文,不要用汉语拼音 1:包(package):用于将完成不同功能的类分门别类,放在不同的目录(包)下,包的命名规则:将公司域名反转作为包名.比如www.sohu.com 对于包名:每个字母都需 ...