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 就是建立连接时触发的事件* 获取登录信息* 并且把用户添加到用户列表中*/@OnOpenpublic 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 blocke.printStackTrace();}}/*** 接收前端传来的消息/发送消息*/@OnMessagepublic 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));}/** 客户端断开链接后将其从线程安全的集合中移除*/@OnClosepublic 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";}
}

前端代码的实现：

<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(){//关闭websocketws.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")

WebSocket多人聊天室相关推荐

WebSocket实现简易版的多人聊天室
一.websocket简介 WebSocket是一种在单个TCP连接上进行全双工通信的协议.WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推 ...
socket.io php 聊天室,WebSocket学习（一）——基于socket.io实现简单多人聊天室
前言什么是Websocket呢? 我们都知道在Http协议中,客户端与服务器端的通信是靠客户端发起请求,然后服务器端收到请求再进行回应,这个过程中,客户端是主动的,服务器端是被动的.Websocke ...
SpringBoot WebSocket之多人聊天室实现
SpringBoot WebSocket之多人聊天室实现 WebSocket简介什么是WebSocket? 为什么使用WebSocket? WebSocket的技术特点: WebSocket的技术优 ...
SpringBoot——SpringBoot集成WebSocket实现简单的多人聊天室
文章目录: 1.什么是WebSocket? 2.Java中的WebSocket API 2.1 WebSocket开发中的相关注解及API方法 2.2 前端技术对WebSocket的支持 3.多人聊天 ...
Nodejs+webSocket搭建多人聊天室
NodeJs+webSocket搭建多人聊天室准备的东西: 第一步:安装插件并且完善服务端第二步 :搭建客户端并与服务端的通信第三步 :添加CSS样式第四步:总结今天花了一个上午的时间去学习 ...
[源码和文档分享]基于Netty和WebSocket的Web聊天室
一.背景伴随着Internet的发展与宽带技术的普及,人们可以通过Internet交换动态数据,展示新产品,与人进行沟通并进行电子商务贸易.作为构成网站的重要组成部分,留言管理系统为人们的交流提供了 ...
workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）...
workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...
java+websocket实现网页聊天室
核心技术websocket 前提 1.tocmat7.02版本以上 2.浏览器支持websocket通讯 3.这个是html5的功能客户端和服务器建立连接 jsp/html页面 1.浏览器和后台服务 ...
node php聊天室,利用socket.io实现多人聊天室(基于Nodejs)
利用socket.io实现多人聊天室(基于Nodejs) socket.io简介在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这 ...
nodejs websocket 实现简易聊天室功能
文章目录 1. 服务端 app.js 代码 2. 客户端 app.html 代码 3. 样式代码 app.css 4. nodemon 辅助开发首先说明,以下代码都是基于 Nodejs+webSoc ...

WebSocket多人聊天室

WebSocket多人聊天室相关推荐

最新文章

热门文章