话不多说，直接看代码（开发工具今天做了很大的更新，界面变化较多，但是更好用了）
这是我的page页面
Paste_Image.png
界面效果如下
Paste_Image.png
主要是，客户端发送一条记录，服务器端回复一条相同的记录，样子很丑，捂脸。
以下是代码
-------小程序前台
Js文件
// websocket.js
Page({
data: {
send: [],
receive: [],
},
onLoad: function (options) {
var that=this;
console.log(this);
var receivetemp = this.data.receive;
//建立连接
wx.connectSocket({
url: "ws://127.0.0.1:8080/smallpragram/websocket",
})
//连接成功
wx.onSocketOpen(function () {
wx.sendSocketMessage({
data: 'stock',
})
})
//接收数据
wx.onSocketMessage(function (data) {
console.log(data);
console.log("客户端回复的消息" + data.data);
receivetemp.push(data.data);
that.setData({
receive: receivetemp
})
})
//连接失败
wx.onSocketError(function () {
console.log('websocket连接失败！');
})
},
sendMessage: function (e) {
console.log(e);
var sendtemp=this.data.send;
sendtemp.push(' 发送的消息：'+e.detail.value.message);
this.setData({
send: sendtemp
})
console.info(this.data.receive);
wx.sendSocketMessage({
data: e.detail.value.message
})
}
})
Wxml文件（不是很会写样式，就是加了个颜色区分一下，本来想弄成两列，太难弄了）
<!--websocket.wxml-->
<text>websocket.wxml</text>
<view class="classname">
<form bindsubmit="sendMessage" bindreset="formReset">
<view class="classname">
<input name="message" bindinput="valuechange" id="textvalue" style="background-color:#fcf7fc" value="{{message}}">
</input>
<button size="mini" formType="submit">send</button>
</view>
</form>
<view class="listclass">
<!-- 发送的信息 -->
<!-- <span>发送的消息</span> -->
<view wx:for="{{send}}" class="flex-item bc_green" wx:for-item="i" >
<text class="item"> {{i}} </text>
</view>
<!-- 接收的信息 -->
<!-- <span>接收的消息</span> -->
<view wx:for="{{receive}}" class="flex-item bc_red" wx:for-item="j">
<text class="item"> {{j}} </text>
</view>
</view>
</view>
Wxss文件
/* websocket.wxss */
.flex-item{
display: inline-block;
/* height: 100px; */
word-break:break-all;
}
.bc_red{
background-color: red;
}
.bc_green{
background-color: greenyellow;
}
-----------Java后台
主要参考博客 http://www.cnblogs.com/xdp-gacl/p/5193279.html
很喜欢这位大神的博客，写的很详细，赞，学习到很多东西
Java类遇到的问题：使用tomcat8+jdk7成功，使用tomcat7是失败的，发布时需注意
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
/**
* @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,
* 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
*/
@ServerEndpoint("/websocket")
public class WebSocketTest {
//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();
//与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
/**
* 连接建立成功调用的方法
* @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //在线数加1
System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
try{
sendMessage("进入消息队列");
}catch(Exception e){
e.printStackTrace();
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose(){
webSocketSet.remove(this); //从set中删除
subOnlineCount(); //在线数减1
System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
}
/**
* 收到客户端消息后调用的方法
* @param message 客户端发送过来的消息
* @param session 可选的参数
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("来自客户端的消息:" + message);
//群发消息
for(WebSocketTest item: webSocketSet){
try {
if(message.equals("你好")){
item.sendMessage(" 回复的消息:"+"你好，请问？");
continue;
}
// item.sendMessage(message);
item.sendMessage(" 回复的消息:"+message);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
}
/**
* 发生错误时调用
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error){
System.out.println("发生错误");
error.printStackTrace();
}
/**
* 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
* @param message
* @throws IOException
*/
public void sendMessage(String message) throws IOException{
// this.session.getBasicRemote().sendText(message);//阻塞式发送消息
this.session.getAsyncRemote().sendText(message);//非阻塞制发送消息
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebSocketTest.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocketTest.onlineCount--;
}
}
以上，结束。
网友评论