java的websocket与js的_关于websocket,JS客户端和java服务端的林林总总。

先讲博主是原生android起家，后期进了混合开发的坑，然后老大让写websocket顺便带一笔服务端的代码，所以博主在一脸懵逼的情况下开始写起了JS和Java。

博主生是前端人，死是移动端的鬼。(所以服务端是我朋友帮我写的)

开始，

先讲需求：要求很低，只需要能连接，不断线就成。

然后开始插入服务端代码，如下

packagecom.webscoket;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestMapping;import javax.websocket.*;importjavax.websocket.server.ServerEndpoint;importjava.io.IOException;importjava.util.concurrent.CopyOnWriteArraySet;/*** @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,

* 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端*/@ServerEndpoint("/websocket")public classWebSocketTest {//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。

private static int onlineCount = 0;//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识

private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet();//与某个客户端的连接会话，需要通过它来给客户端发送数据

privateSession session;/*** 连接建立成功调用的方法

*@paramsession 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据*/@OnOpenpublic voidonOpen(Session session){this.session =session;

webSocketSet.add(this); //加入set中

addOnlineCount(); //在线数加1

System.out.println("有新连接加入！当前在线人数为" +getOnlineCount());

}/*** 连接关闭调用的方法*/@OnClosepublic voidonClose(){

webSocketSet.remove(this); //从set中删除

subOnlineCount(); //在线数减1

System.out.println("有一连接关闭！当前在线人数为" +getOnlineCount());

}/*** 收到客户端消息后调用的方法

*@parammessage 客户端发送过来的消息

*@paramsession 可选的参数*/@OnMessagepublic voidonMessage(String message, Session session) {

System.out.println("来自客户端的消息:" +message);//群发消息

for(WebSocketTest item: webSocketSet){try{

item.sendMessage(message);

}catch(IOException e) {

e.printStackTrace();continue;

}

}

}/*** 发生错误时调用

*@paramsession

*@paramerror*/@OnErrorpublic voidonError(Session session, Throwable error){

System.out.println("发生错误");

error.printStackTrace();

}/*** 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。

*@parammessage

*@throwsIOException*/

public void sendMessage(String message) throwsIOException{this.session.getBasicRemote().sendText(message);//this.session.getAsyncRemote().sendText(message);

}public static synchronized intgetOnlineCount() {returnonlineCount;

}public static synchronized voidaddOnlineCount() {

WebSocketTest.onlineCount++;

}public static synchronized voidsubOnlineCount() {

WebSocketTest.onlineCount--;

}

}

然后踩第一个坑，代码之前是拿maven写的没有jar包，我的服务器为java，所以第一步导包。

网站上虽然给了正确答案 ，但是很多没给包或者给的不对，我勉为其难给你们一个便宜的。

我尝试不花钱上传的，但是好像不行唉。凑合下吧。

然后就是js端的实现了，如果你特别懂java，那我先给你上一个jsp你门懂得~

代码如下：

Java后端WebSocket的Tomcat实现

Welcome

发送消息

---

关闭WebSocket连接

---

var websocket = null;

//判断当前浏览器是否支持WebSocket

if ('WebSocket' in window) {

websocket = new WebSocket("ws://localhost:8080/websocket");

}

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 + '
';

}

//关闭WebSocket连接

function closeWebSocket() {

websocket.close();

}

//发送消息

function send() {

var message = document.getElementById('text').value;

websocket.send(message);

}

我感觉剩下的我不废话你们就会了，我的js代码如下：

var websocket=null;

if('WebSocket'in window){

websocket=new WebSocket("ws://127.0.0.1:8080/websocket");

}

else{

alert('当前游览器：Not support webSocket');

}

websocket.οnerrοr=function(){

console.log("连接错误");

};

websocket.onopen=function(){

websocket.send('1');

}

然后每一页都插个标签就行了

然后就实现了，服务端java和客户端js的连接，大致没坑，主要我没咋写，所以没啥总结的。