WebSocket多人聊天室

WebSocket在楼主理解是一个即时通讯的技术实现，在Web浏览器和服务器之间进行任意的双向数据传输的一种技术。

它的实现其实在tomcat中就已经有列子了，只是有大部分人没有发现而已，在原始的Tomcat的它提供了几个列子

因为楼主在做WebRTC就把Tomcat弄了一下HTTPS协议，端口号也改成了Tomcat本身支持HTTPS协议的的端口号8443、在这里我用了谷歌浏览器的中文翻译

我们首先启动Tomcat、在它的官网我们可以看到它提供了列子给我们参考

在我们点进去之后他会出现3个跳转不同地方的路由，其中就有我们需要的websocket，进入第二个Chat example

它这里只是简单的提供了一下websocket的代码

在Tomcat的目录下提供了websocket所需的jar包：C:\Program Files\Apache Software Foundation\apache-tomcat-8.5.28\lib  这个目录是Tomcat的安装目录下的lib文件夹里面，找到我们需要的jar包：websocket-api.jar

在项目中新建java类，采用注解的方式，实现OnOpen/OnClose/OnMessage回调方法即可。代码如下：

import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

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

import com.lin.bean.Message;
import com.lin.mapper.JsonUtil;

/**
 * 创建多个房间的访问
 * 
 * Msgs<br/>
 * 创建人:linchen<br/>
 * 时间：2018年2月14日-下午6:35:58 <br/>
 * @version 1.0.0<br/>
 *
 */
@ServerEndpoint("/video")
public class Msgs {
	
	private String username;//当前用户
	//所用用户通信管道
	private static List<Session> sessions = Collections.synchronizedList(new ArrayList());
	//所有用户列表
	private static List<String> users = Collections.synchronizedList(new ArrayList());
	
	/**
	 * @Onopen 就是建立连接时触发的事件
	 * 获取登录信息
	 * 并且把用户添加到用户列表中
	 */
	@OnOpen
	public void open(Session session) {
		String query = session.getQueryString();
		username = query.split("=")[1];
		//把每个session添加到用户通信管道里面去
		sessions.add(session);
		users.add(username);
		String msg = "欢迎" + username + "来到聊天室!";
		Message message = new Message();
		message.setWelcome(msg);
		message.setUsername(users);
		broadcast(sessions,JsonUtil.toString(message));
	}
	/**
	 * 发送广播
	 */
	public void broadcast(List<Session> boradcast, String msg) {
			try {
				if (sessions.size() != 0) {
	                for (Session s : sessions) {
	                    if (s != null) {
	                       s.getBasicRemote().sendText(msg);
	                    }
	                }
	            }
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	/**
	 * 接收前端传来的消息/发送消息
	 */
	@OnMessage
	public void onMessage(String msg, Session session) {
		System.out.println("前端发送的消息为："+msg);
		Message message = new Message();
		message.setUsername(users);
		message.setContext(username, msg);
		broadcast(sessions,JsonUtil.toString(message));
	}
	 /*
     * 客户端断开链接后将其从线程安全的集合中移除
     */
    @OnClose
    public void onClose(Session session) {
        sessions.remove(session);
    }
}

Message类：

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

public class Message {
	private String welcome;
	private List<String> username; //存放用户集合
	private String context;
	
	public String getWelcome() {
		return welcome;
	}
	public void setWelcome(String welcome) {
		this.welcome = welcome;
	}
	public List<String> getUsername() {
		return username;
	}
	public void setUsername(List<String> username) {
		this.username = username;
	}
	public String getContext() {
		return context;
	}
	public void setContext(String context) {
		this.context = context;
	}
	public void setContext(String name,String msg) {
		this.context = name +" 在"
				+ new SimpleDateFormat("yyyy-MM-dd hh:mm:ss").format(new Date()) + "说<br>"
				+ msg + "<br>" ;
	}
}

视图层代码用了ssm框架springmvc做视图跳转

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * 进入首页方法
 * 
 * IndexController<br/>
 * 创建人:linchen<br/>
 * 时间：2018年3月1日-下午4:11:45 <br/>
 * @version 1.0.0<br/>
 *
 */
@Controller
public class IndexController {
	
	/**
	 * (进入登录页面)<br/>
	 * 方法名：login<br/>
	 * @param request
	 * @return String<br/>
	 */
	@RequestMapping("/login")
	public String login(HttpServletRequest request) {
		return "login";
	}
	
	/**
	 * (进入聊天室)<br/>
	 * 方法名：index<br/>
	 * @param request
	 * @param account
	 * @return String<br/>
	 */
	@RequestMapping("/logins")
	public String  index(HttpServletRequest request,String account) {
	    request.getSession().setAttribute("user", account);
		return "index";
	}
}

前端代码的实现：

login.jsp

<body>
<div class="htmleaf-container">
	<div class="wrapper">
		<div class="container">
			
			<div class="form">
				<input type="text" id="account" placeholder="请输入账号">
				<button type="button" id="login-button">Login</button>
			</div>
		</div>
	</div>
</div>

<script src="http://192.168.0.102:8080/WebRTC/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(function(){
		$("#login-button").on("click",function(){
			var account = $("#account").val();
			if(account==""){
				return;
			}
			window.location.href = "http://192.168.0.102:8080/WebRTC/logins?account="+account;
		});
	});
</script>

index.jsp：

<body>
 <div id="container" style="border: 1px solid black; width: 400px;height:400px; float:left;">
   <div id="content" style="height:300px;"></div>
   <div style="border-top: 1px solid black; width: 400px;height:100px;">
      <input type="text" id="msg"/><input type="button" value="发送" οnclick="send();">
   </div>
 </div>
 <div id="userList" style="border: 1px solid black; width: 200px;height:400px; float:left;"></div>
<script type="text/javascript" src="http://192.168.0.105:8080/WebRTC/static/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
   //进入聊天页面，就打开socket通道
   var ws; //一个ws对象就是一个通话管理
   var target = "ws://192.168.0.102:8080/WebRTC/video?username=${user}";
   var main; //video父辈元素
   window.onload = function(){
	   //根据浏览器的不同区创建不同的websocket对象
	   if ('WebSocket' in window) {
           ws = new WebSocket(target);
       } else if ('MozWebSocket' in window) {
           ws = new MozWebSocket(target);
       } else {
           alert('WebSocket is not supported by this browser.');
           return;
       }
	   //发送消息
	   ws.onmessage = function (event) {
		  var obj = JSON.parse(event.data);
		  console.log(obj);
		  if(obj.welcome != null){
			  $("#content").append(obj.welcome + "<br>");
		  }

		  if(obj.context != null){
			  $("#content").append(obj.context);
		  }
		  
		  if(obj.username != null){
			  //获取前先清空
			  $("#userList").html("");
			  //循环用户
			  $(obj.username).each(function(){
				  $("#userList").append(this + "<br>");
			  });
		  }
		  
       };
       ws.close = function(){
    	   //关闭websocket
    	   ws.close();
       };
       
   }
   //websocket发送消息
   function send(){
	   var msg = $("#msg").val();
	   ws.send(msg);
	   $("#msg").val("");
   }
</script>
</body>

本文参考了：https://blog.csdn.net/yinqingwang/article/details/52565133

如果在https的情况下websocket创建必须加上一个s：ws = new WebSocket("wss://192.168.0.102:8080/WebRTC/video")