接着上讲，这次我将会完成界面在线聊天的功能
1.打开上次的项目
在resource下建立以下几个文件和文件夹：如图
文章图片
1.jq下载地址：点击下载
2.hsocket.js
//是否支持websocket
function isSupportWebSokent() {
var result=false
if ('WebSocket' in window) result=true
if ('MozWebSocket' in window) result=true
return result
}
//初始化websocket并接收链接消息
function Hsocket(url,from,to) {
this.websocket="";
this.from=from.toString();
this.to=-1;
if(to!=null) this.to=to;
this.to=this.to.toString()
if ('WebSocket' in window) {
this.websocket = new WebSocket(url);
} else if ('MozWebSocket' in window) {
this.websocket = new MozWebSocket(url);
}
var data=""
this.websocket.onopen=function (event) {
data=https://www.it610.com/article/event.data;
}
return data
}
//发送消息
Hsocket.prototype.sendMessage=function (message) {
var from=this.from;
var to=this.to;
var params={from:from, to:to, msg:message}
this.websocket.send(JSON.stringify(params))
}
//主动关闭链接
Hsocket.prototype.close=function () {
this.websocket.close()
}解释一波吧,isSupportWebSokent方法为用来判断是否支持websocket协议，Hsocket对象初略封装了websocket
其他的自己看注释 不想说了
3.登录界面index.html
聊天登录界面 - 锐客网
登录
欢迎登录
请输入id:
3.群聊界面all-chat.html
- 锐客网
【websoket实战|使用websocket做一个及时通讯功能————03使用网页完成即时通讯群聊天】好了,大工完成。现在你可以登录到群聊聊天室里进行聊天了
