技术帮
 

简单的WebSocket例子

本网站内容基本都是原创作品,未得到作者同意也欢迎转载
转载请注明出处:技术帮
说你呢,赶紧长按二维码,然后点击识别图中二维码

任何技术难题可进QQ群提问:【小崔说编程
对于提问的原则是:没有你不能问的,只有我不会答的

1472955908895017376.png说两句


本例子其实也是借鉴了CSDN中的一篇博文:http://blog.csdn.net/ma929226676/article/details/50970524 试验后发现可用,就记录下来。


1473058358717068189.png 技术说明

本文采用的是javax.websocket-api.jar,这个应该是Java官方提供的jar包,通过读其源代码,可以看到CopyRight Oracle的文字,应该是官方的东西。

本文采用的JDK是1.8的,Tomcat采用的是9.0的,因此对于WebSocket支持的很好,简单的配置即可实现。


根据CSDN的枫桥(即原作者)所说,Tomcat7.0中需要在context.xml文件中配置 <Loader delegate="true"/>  否则会报错。


该例子包括两部分:

服务端:简单写了一个WebSocket的服务端代码,有点类似Servlet的配置

JS端:用JS代码访问WebSocket服务端


 服务端代码

首先,服务端是一个Web项目。

项目需要引入javax.websocket-api的依赖。

<dependency>
    <groupId>javax.websocket</groupId>
    <artifactId>javax.websocket-api</artifactId>
    <version>1.1</version>
</dependency>

然后写一个普通的类,在其中加入若干注解即成为一个WebSocket的服务端了。

注解说明:

@ServerEndPoint("/chat") :在类名前,用于声明该类成为一个WebSocket的服务端。

参数定义了该WebSocket的访问路径,这个有点儿类似Servlet 

这个类是与会话绑定的,即每一个客户端的请求都会创建一个实例。


@OnOpen : 放到某个方法名前,则该方法在有客户端连接请求的时候被调用。方法的形参是会话对象

@OnClose : 这个方法简单,没有太多需要解释的

@OnMessage : 当某个客户端发送消息的时候触发。

两个形参,参数1(字符串类型)表示接受到的消息;参数2(会话)表示与客户端的连接。

@OnError : 当有异常发生的时候


服务端代码如下:

package com.cui.app.ws;

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

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

@ServerEndpoint("/chat")
public class ChatServer {

	// 静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
	private static int onlineCount = 0;

	// concurrent包的线程安全Set,用来存放每个客户端对应的ChatServer对象。
	// 若要实现服务端与单一客户端通信的话,可以使用Map来存放,其中Key可以为用户标识
	private static CopyOnWriteArraySet<ChatServer> webSocketSet = new CopyOnWriteArraySet<ChatServer>();

	//与某个客户端的连接会话,需要通过它来给客户端发送数据
    private Session session;
    
    /**
     * 连接建立成功调用的方法
     * @param session  可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());
    }
    
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(){
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1    
        System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());
    }
    
    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     * @param session 可选的参数
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息:" + message);
         
        //群发消息
        for(ChatServer item: webSocketSet){             
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
                continue;
            }
        }
    }
    
    /**
     * 发生错误时调用
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error){
        System.out.println("发生错误");
        error.printStackTrace();
    }
    
    /**
     * 这个方法与上面几个方法不一样。没有用注解,是根据自己需要添加的方法。
     * @param message
     * @throws IOException
     */
    public void sendMessage(String message) throws IOException{
        this.session.getBasicRemote().sendText(message);
        //this.session.getAsyncRemote().sendText(message);
    }
    
    
    private static synchronized int getOnlineCount() {
        return onlineCount;
    }
 
    private static synchronized void addOnlineCount() {
    	ChatServer.onlineCount++;
    }
     
    private static synchronized void subOnlineCount() {
    	ChatServer.onlineCount--;
    }
    
    
}

 JS端

WebSocket在客户端采用的Html5的机制。

本例子实现了一个无论哪个客户端页面发出一些消息,都会群发到所有的客户端页面。

页面上有以下内容:

	<input id="text" type="text" />
	<button onclick="send()">Send</button>
	<button onclick="closeWebSocket()">Close</button>
 	<div id="message"></div>

JS代码如下:

<script type="text/javascript">
var websocket = null;

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

可以看到,本例子主要采用了WebSocket对象,进行发消息和接收消息。