网站之web实时推送消息 - 好文

一.推送方式

1、通常进行的Web开发都是由客户端主动发起请求，然后服务器对请求做出响应并返回给客户端。

2、但是也可以由服务器主动将消息推送到客户端。

二.实现方式

WEB即时通讯/消息推送 <http://blog.csdn.net/u010297957/article/details/60878821>

三.WebSocket入门

WebSocket与消息推送 <https://www.cnblogs.com/best/archive/2016/09/12/5695570.html>

注意：WebSocket不兼容部分浏览器，比如Internet8版本以下，但是netty-socketio兼容所有浏览器。

四.实例demo

这里我是基于netty-socketio的web推送服务 <http://www.cnblogs.com/wxgblogs/p/6852470.html>。

1、下载jar包或者maven管理
<dependency> <groupId>com.corundumstudio.socketio</groupId>
<artifactId>netty-socketio</artifactId> <version>1.7.12</version> </dependency>
netty-socketio-1.6.5.jar

注意：需要依赖的jar包

2、been类
package com.asyn.chatObjectDO; public class ChatObject { private String
userName; private String message; public ChatObject() { } public
ChatObject(String userName, String message) { super(); this.userName =
userName; this.message = message; } public String getUserName() { return
userName; } public void setUserName(String userName) { this.userName =
userName; } public String getMessage() { return message; } public void
setMessage(String message) { this.message = message; } }
3、listener服务
package com.asyn.listener; import com.asyn.chatObjectDO.ChatObject; import
com.corundumstudio.socketio.AckRequest; import
com.corundumstudio.socketio.SocketIOClient; import
com.corundumstudio.socketio.SocketIOServer; import
com.corundumstudio.socketio.listener.DataListener; public class
CharteventListener implements DataListener<ChatObject> { SocketIOServer server;
public void setServer(SocketIOServer server) { this.server = server; }
@Override public void onData(SocketIOClient client, ChatObject data, AckRequest
ackSender) throws Exception { // chatevent为事件的名称，data为发送的内容
this.server.getBroadcastOperations().sendEvent("chatevent", data); } }
4、启动服务
package com.asyn.server; import com.asyn.chatObjectDO.ChatObject; import
com.asyn.listener.CharteventListener; import
com.corundumstudio.socketio.Configuration; import
com.corundumstudio.socketio.SocketIOServer; public class SocketServer { public
static void main(String[] args) throws InterruptedException { Configuration
config = new Configuration(); config.setHostname("localhost");
config.setPort(9092); SocketIOServer server = new SocketIOServer(config);
CharteventListener listner = new CharteventListener();
listner.setServer(server); // chatevent为事件名称
server.addEventListener("chatevent", ChatObject.class, listner); //启动服务
server.start(); System.out.println(); Thread.sleep(Integer.MAX_VALUE);
server.stop(); } }
5、前台页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert
title here</title> <script src="./js/jquery-3.3.1.min.js"
type="text/javascript"></script>  <script type="text/javascript"
src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <style> body {
padding:20px; } #console { height: 400px; overflow: auto; } .username-msg
{color:orange;} .connect-msg {color:green;} .disconnect-msg {color:red;}
.send-msg {color:#888} </style> </head> <body> <h1>Netty-Socketio示例 </h1> <br/>
<div id="console" class="well"> </div> <form class="well form-inline"
onsubmit="return false;"> <input id="name" class="input-xlarge" type="text"
placeholder="用户名称..."/> <input id="msg" class="input-xlarge" type="text"
placeholder="发送内容..."/> <button type="button" onClick="sendMessage()"
class="btn">Send</button> <button type="button" onClick="sendDisconnect()"
class="btn">Disconnect</button> </form> </body> <script type="text/javascript">
var socket = io.connect('http://localhost:9092'); socket.on('connect',
function() { output('<span class="connect-msg">Client has connected to the
server!</span>'); }); socket.on('chatevent', function(data) { output('<span
class="username-msg">' + data.userName + ':</span> ' + data.message); });
socket.on('disconnect', function() { output('<span class="disconnect-msg">The
client has disconnected!</span>'); }); function sendDisconnect() {
socket.disconnect(); } function sendMessage() { var userName = $("#name").val()
var message = $('#msg').val(); $('#msg').val(''); socket.emit('chatevent',
{userName: userName, message: message}); } function output(message) { var
currentTime = "<span class='time'>" + new Date() + "</span>"; var element =
$("<div>" + currentTime + " " + message + "</div>");
$('#console').prepend(element); } </script> </html>

热门工具换一换