注:主要的问题是当浏览器窗口直接关闭时,后台会报异常,因为后台还在继续向浏览器端写数据,但是浏览器已经关闭了,会报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. jsp中的文件上传

    首先需要有以下的jar包 jsp代码如下: <!-- ${pageContext.request.contextPath}为: "/" + 当前项目名 --> < ...

  2. 【css】cursor鼠标指针光标样式知识整理

    在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 div( cu ...

  3. kafka及扩展的安装笔记

    参考文件 https://blog.csdn.net/weiwenjuan0923/article/details/76152744 一.首先确认下jdk有没有安装 安装参照这个连接 https:// ...

  4. 精通SpringBoot--分页查询功能的实现

    本文将介绍如何实现分页查询功能,推荐使用github的pagehelper插件实现(事实上大家基本都是这么干的),但本文的实现方式和大多数不同,废话少说,现在就带着大家看看区别在哪里.先看pom.xm ...

  5. bootmem API总结

    bootmem_init()函数执行完成后,linux启动初期的bootmem分配器就初始化完成了,可以调用bootmem提供的API分配内存. 这些API在include/linux/bootmem ...

  6. 使用Vue CLI3开发多页面应用

    一.安装vue-cli3 1.如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remov ...

  7. datagrid的formatter

    1.formatter函数 formatter:function(value,rowData,rowIndex){ return 'xxx'; } 注意: (1)formatter一定要有返回,且返回 ...

  8. mysql 分组查询前n条数据

    今天去面试,碰到一道面试题: 有一个学生成绩表,表中有 表id.学生名.学科.分数.学生id .查询每科学习最好的两名学生的信息: 建表sql: CREATE TABLE `stuscore` ( ` ...

  9. selenium随笔

    1.点击一个连接通常录制一个click命令,通常需要改变它到clickAndWait命令,确保案例暂停,新的页面完全被转载进来. 2.测试案例需要检查Web页的属性,需要assert和verify命令 ...

  10. 实战小项目之IMX6 VPU使用

    项目简介 基于官方的demo进行修改,限于能力问题,并没有将功能代码完全从官方的demo中分离出来,还是基于原来的框架进行修改,做了一些简单的封装,我做的工作如下: 使用自己的采集程序 定义6中工作模 ...