Js WebScoket与Java WebSocket的通信

最新推荐文章于 2022-12-22 15:22:33 发布

途次早行客

最新推荐文章于 2022-12-22 15:22:33 发布

阅读量1.2w

点赞数 2

分类专栏： java EE javascript 文章标签： websocket java java ee web javascript

本文链接：https://blog.csdn.net/qq_36779082/article/details/72950249

版权

java EE 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

	不喜欢说废话，直接上代码←←
	在myeclise里面新建一个项目，项目名命名为websocket，请使用java ee7.0或以上web环境。
	1，在WebRoot下新建一个demo.html,其内容如下：

<!DOCTYPE html>
<html>
	<head>
		<style>
			#content{width:600px;height:200px;}
		</style>
		<meta charset="utf-8"/>
	</head>
	<body id="body">
		<textarea id="content" rows="40" cols="500"></textarea>
		<div class="btn">
			<input type="button" value="清空" onclick="reset()"/>
			<input type="button" value="发送" onclick="send()">
		</div>
		<script type="text/javascript">
			var socket = new WebSocket('ws://127.0.0.1:80/websocket/ws'); 

			//创建Socket 
			socket.onopen = function(event) { 

			  //向服务器发送数据
			  //socket.send('哈哈哈哈'); 

			  //接收数据事件
			  socket.onmessage = function(event) {
				body.innerHTML+="<br/>对方："+event.data;
			  }; 

			  // socket关闭事件
			  socket.onclose = function(event) {
				body.innerHTML+="<br/>系统：已和服务器断开连接！！！";
			  }; 

			  //关闭socket
			  //socket.close()
			};

			//-----------
			var body=document.getElementById("body");
			function send(){
				var msg=document.getElementById("content").value;//获取输入框内容
				socket.send(msg);//发送消息
				reset();//清空输入框
				body.innerHTML+="<br/>我："+msg;
			}

			function reset(){
				document.getElementById("content").value="";
			}
		</script>
	</body>
</html>

js代码已经包含在这个html中，其中已经展示了js WebSocket的各种基本用法；

2,在src下新建一个action包，在action包里面新建一个WSServer类，其内容如下：

package action;

import java.io.IOException;

import javax.websocket.CloseReason;
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注解中的内容是用户客户端websocket的连接url,例如ws://127.0.0.1:80/websocket/ws,
//结构形式为“ws：//ip:端口/项目名/指定的url”
@ServerEndpoint("/ws")
public class WSServer {
    private Session session;
    //连接打开时执行
    @OnOpen
    public void onOpen(Session session) {
    	this.session=session;
        System.out.println("一个客户端连接进来了 ... 它的sessionid是：" + session.getId());
    }

    //收到消息时执行
    @OnMessage
    public void onMessage(String message, Session session) {
    	System.out.println(session.getId()+"客户端发送的消息是："+message);
        try{
        	this.sendMessage(message);//消息发回给客户端
        }catch(Exception e){
        	e.printStackTrace();
        }
        //return currentUser + "：" + message;如果有返回值，则客户端发送消息后会收到这个返回值
    }

    //连接关闭时执行
    @OnClose
    public void onClose(Session session, CloseReason closeReason) {
        System.out.println("一个客户端关闭了，它的sessionid是：" + session.getId());
    }

    //连接错误时执行
    @OnError
    public void onError(Throwable t) {
        t.printStackTrace();
    }
    //自定义的方法，用于发送消息
    public void sendMessage(String message) throws IOException{
    	this.session.getBasicRemote().sendText(message);
        //this.session.getAsyncRemote().sendText(message);
    }
}

这是java WebSocket建立服务端的方式，主要是通过注解去设定各种事件，每当有一个客户端连接进来，就会产生一个WSServer的对象实例，如果要用于多客户端的通信（如群聊），那么在@onOpen事件中应该收集好连接进来的客户端产生的实例以便于消息的转发。
部署这个简单的项目到tomcat，然后开启tomcat服务器，通过浏览器访问demo.html就可以感受WebSocket的通信了。注意，楼主代码里面tomcat使用的是80端口，不是80端口的读者请自行修改代码。
代码有不懂的读者可以留言评论，但不一定会收到回复←←。

途次早行客

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
4
评论
Js WebScoket与Java WebSocket的通信

不喜欢说废话，直接上代码←← 在myeclise里面新建一个项目，项目名命名为websocke，请使用java ee7.0或以上web环境。 1，在WebRoot下新建一个demo.html,其内容如下：html> head> style> #content{width:600px;height:200px;}
复制链接

扫一扫