websocket实现QQ聊天一之二(UI js编写)
2017-11-11 08:38
295 查看
今天说明一下 websocket实现QQ聊天js代码
说明:根据自己实际情况编写,但是万变不离这几个状态,建议将它封装为单独的js文件,引入
说明:根据自己实际情况编写,但是万变不离这几个状态,建议将它封装为单独的js文件,引入
function setMessageInnerHTML(data) { $('.newsList').append(data); } var websocket = null; var hostUrl="localhost:8080/Jfinal"; function openSocket() { //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://"+hostUrl+"/webSocketChat.ws");//多人聊天链接简易版 }else { setErrorMessage('当前浏览器 Not support websocket'); } //连接发生错误的回调方法 websocket.onerror = function () { setErrorMessage("WebSocket连接发生错误"); }; //连接成功建立的回调方法 websocket.onopen = function () { setErrorMessage("WebSocket连接成功"); }; //接收到消息的回调方法 websocket.onmessage = function (event) { setMessageInnerHTML(event.data); }; //连接关闭的回调方法 websocket.onclose = function () { setErrorMessage("WebSocket连接关闭"); }; //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function () { closeWebSocket(); }; } //发送消息 function send(message) { websocket.send(message); } function setErrorMessage(message) { $('.newsList').append(message); } //关闭WebSocket连接 function closeWebSocket() { websocket.close(); } openSocket();好了,前后端都已经完结,下一章说明一下后端几个类的功能
相关文章推荐
- (素材源码)猫猫学IOS(十八)UI之QQ聊天布局_键盘通知实现自动弹出隐藏_自动回复
- (素材源码)猫猫学IOS(十八)UI之QQ聊天布局_键盘通知实现自动弹出隐藏_自动回复
- NodeJs WS 模块 实现 WebSocket 聊天
- 基于Node.js + socket.io实现WebSocket的聊天DEMO
- 猫猫学IOS(十八)UI之QQ聊天布局_键盘通知实现自动弹出隐藏_自动回复
- 猫猫学IOS(十八)UI之QQ聊天布局_键盘通知实现自动弹出隐藏_自动回复
- UI基础--UITableView实现仿QQ聊天页面
- 使用cocoscreator + node.js + websocket实现简单的聊天服务
- AJ学IOS(18)UI之QQ聊天布局_键盘通知实现自动弹出隐藏_自动回复
- JS实现仿QQ聊天窗口抖动特效
- UIBootatrap:是由AngularJS UI团队编写的纯AngularJS实现的Bootstrap组件
- websocket+node.js实现实时聊天系统问题咨询
- JS实现仿QQ聊天窗口抖动特效
- iOS微信QQ聊天界面的UI框架以及Socket简单实现群聊功能
- 【HTML5】简单实现QQ聊天气泡效果
- 通信基础篇小项目-----多人聊天QQ的实现
- Java实现简易QQ聊天
- 使用WebSocket实现多人实时聊天
- jquery.blockUI.js实现上传滚动等待效果
- Android_UI 仿QQ侧滑菜单效果的实现