WebSocket教程(二)

运行环境:jdk8 tomcat8   无须其他jar包。

package com.reach.socketController;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.annotation.Resource;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint(value ="/newwebsocket/{userId}")
public class Webcomment {
    @Resource
    private Webcomment webcomment;

    //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;
    //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话,可以使用Map来存放,其中Key可以为用户标识
    private static CopyOnWriteArraySet<Webcomment> webSocketSet = new CopyOnWriteArraySet<Webcomment>();
  //线程安全的Map
    private static ConcurrentHashMap<String,Session> webSocketMap = new ConcurrentHashMap<String,Session>();//建立连接的方法
    @OnOpen
    public void onOpen(Session session,@PathParam("userId")String  userId){
        /*获取从/websocket开始的整条链接,用于获取userId?***=***的参数
        String uri = session.getRequestURI().toString();*/
    webSocketMap.put(userId, session);
    addOnlineCount(); //在线数加
    System.out.println(userId+"进入聊天室");
    System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());
    }

    /**
    * 连接关闭调用的方法
    */
    @OnClose
    public void onClose(Session session){
    Map<String, String> map = session.getPathParameters();
    webSocketMap.remove(map.get("userId")); //从set中删除
    for(String user:webSocketMap.keySet()){
    System.out.println(user);
    }
    subOnlineCount(); //在线数减
    System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());
    }

    /**
    * 收到客户端消息后调用的方法
    * @param message 客户端发送过来的消息
    * @param session 可选的参数
    */
    @OnMessage
    public void onMessage(String message, Session session) {
    System.out.println("来自客户端的消息:" + message);
    //获取用户ID
    Map<String, String> map = session.getPathParameters();
    String userId = map.get("userId");
    for(String user:webSocketMap.keySet()){
        try {
            sendMessage(user+"你好,我是"+userId+"   "+message,webSocketMap.get(user));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    }

    /**
    * 发生错误时调用
    * @param session
    * @param error
    */
    @OnError
    public void onError(Session session, Throwable error){
    System.out.println("发生错误");
    error.printStackTrace();
    }

    public void sendMessage(String message,Session session) throws IOException{
        if(session.isOpen()){
        session.getAsyncRemote().sendText(message);
        }
        //this.session.getAsyncRemote().sendText(message);
        }

    public static synchronized int getOnlineCount() {
        return onlineCount;
        }
    public static synchronized void addOnlineCount() {
        Webcomment.onlineCount++;
        }
    public static synchronized void subOnlineCount() {
        Webcomment.onlineCount--;
        }
}

html代码,可以单独建立html,无须放在项目中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
 </head>

 <body>

  <center>
Welcome<br/><input id="text" type="text"/>
<button onclick="send()">发送消息</button>
<hr/>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr/>
<div id="message"></div>

 </body>
 <script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if (‘WebSocket‘ in window) {
alert(‘当前浏览器支持 websocket‘);
websocket = new WebSocket("ws://localhost:8080/Y-websocket/newwebsocket/234");
}
else {
alert(‘当前浏览器 Not support websocket‘)
}
//连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket连接发生错误");
};
//连接成功建立的回调方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket连接成功");
}
//接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
//连接关闭的回调方法
websocket.onclose = function () {
setMessageInnerHTML("WebSocket连接关闭");
}
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = function () {
closeWebSocket();
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById(‘message‘).innerHTML += innerHTML + ‘<br/>‘;
}
//关闭WebSocket连接
function closeWebSocket() {
websocket.close();
}
//发送消息
function send() {
var message = document.getElementById(‘text‘).value;
websocket.send(message);
}
</script>
</html>

友情提示: 向客户端发送信息  sendText()是用来传输字符串的,有一个sendObject()方法可以通过转码器发送javabean。

      但是这里我们不推荐,因为非常麻烦。最简单的办法,就是把要发送的bean转成json字符串。 bean转json

      然后在页面将接收的json字符串转成json:JSON.parse(event.data)

时间: 2024-10-15 05:10:38

WebSocket教程(二)的相关文章

Spring WebSocket教程(二)

实现目标 这一篇文章,就要直接实现聊天的功能,并且,在聊天功能的基础上,再实现缓存一定聊天记录的功能. 第一步:聊天实现原理 首先,需要明确我们的需求.通常,网页上的聊天,都是聊天室的形式,所以,这个例子也就有了一个聊天的空间的概念,只要在这个空间内,就能够一起聊天.其次,每个人都能够发言,并且被其他的人看到,所以,每个人都会将自己所要说的内容发送到后台,后台转发给每一个人. 在客户端,可以用Socket很容易的实现:而在web端,以前都是通过轮询来实现的,但是WebSocket出现之后,就可以

WebSocket 教程

WebSocket 教程 本篇博客系转载 原文地址 http://www.ruanyifeng.com/blog/2017/05/websocket.html?utm_source=tuicool&utm_medium=referral 作者: 阮一峰 日期: 2017年5月15日 WebSocket 是一种网络通信协议,很多高级功能都需要它. 本文介绍 WebSocket 协议的使用方法. 一.为什么需要 WebSocket? 初次接触 WebSocket 的人,都会问同样的问题:我们已经有了

WebSocket 教程(转载)

WebSocket 教程 作者: 阮一峰 日期: 2017年5月15日 WebSocket 是一种网络通信协议,很多高级功能都需要它. 本文介绍 WebSocket 协议的使用方法. 一.为什么需要 WebSocket? 初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处? 答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起. 举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果.

C#微信公众号开发系列教程二(新手接入指南)

http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可直接跳过,也欢迎大神吐槽. 目录 C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流程是这样的,用户发送消息到微信服务器,微

C语言快速入门教程(二)

C语言快速入门教程(二) C语言的基本语法 本节学习路线图: 引言: C语言,顾名思义就是一门语言,可以类比一下英语; 你要说出一个英语的句子需要:  单词  +  语法!  将单词按照一定的语法拼凑起来就成了一个英语句子了; C语言同样是这样,只不过单词可以理解为一些固定的知识点,而语法可以理解为算法(可以理解为解决问题的方法) 在这一节中我们就对固定知识点中的语言描述与数据存储进行解析! 1.C语言的基本元素 1.1  标识符 什么是标识符? 答:在C语言中,符号常量,变量,数组,函数等都需

DataVeryLite入门教程(二) Entity篇

DataVeryLite 是基于.net 4.0的数据库持久化ORM框架. 目前支持的数据库有Sqlserver,Mysql,Oracle,Db2,PostgreSql,Sqlite和Access. 最好先阅读DataVeryLite入门教程(一) 配置篇,然后再阅读本篇.如果你觉得麻烦也可以跳过. Entity是ORM中的核心对象之一,一个继承Entity的对象对应于数据库中的一个表. Entity提供丰富的API对表中的单条数据进行操作. 比如根据id或其他条件,加载,删除,插入,更新和部分

Spring Cloud 入门教程(二): 配置管理

使用Config Server,您可以在所有环境中管理应用程序的外部属性.客户端和服务器上的概念映射与Spring Environment和PropertySource抽象相同,因此它们与Spring应用程序非常契合,但可以与任何以任何语言运行的应用程序一起使用.随着应用程序通过从开发人员到测试和生产的部署流程,您可以管理这些环境之间的配置,并确定应用程序具有迁移时需要运行的一切.服务器存储后端的默认实现使用git,因此它轻松支持标签版本的配置环境,以及可以访问用于管理内容的各种工具.很容易添加

jQuery 入门教程(二): 基本语法

学习jQuery之前需要你有下面几个方面的基本知识 HTML CSS JavaScript jQuery 的基本语法 $(selector).action() $ 符合定义这是一个jQuery语句 (selector) 用来选择某个HTML元素,其语法和CSS的selector语法一样. action() 定义操作该HTML元素的方法. 比如: $(this).hide() – 隐藏当前元素. $("p").hide() – 隐藏所以 <p> 元素. $(".te

HTML/CSS基础教程 二

表 表是十分有用的,用它存储表状的数据更易于阅读.当你想用行列来显示信息时---你猜到了,<table>标签正是你需要的,有许多和表有关的标签,它们都以<table>开始. 表就是将一组数据用行列的形式排列,我们用<tr>标签创建一个表行(table row),<td>标签表示表数据(table date) <!DOCTYPE html> <html> <head> <title>Table Time</