js建立socket(js建立长连接)
Vue.js 如何使用 Socket.IO？
在很多需求业务中，都需要浏览器和服务器实时通信来实现功能，比如：扫码登录(扫码后，手机确认登录，PC网页完成登录并跳转)、订单语言提醒等，这些都是建立在两端实时通信的基础上的。对前端而言，来实现浏览器和服务器实时通信，最好的选择就是Socket.IO库，能够快速的实现两端实时通信功能。
Socket.IO是一个WebSocket库，可以在浏览器和服务器之间实现实时，双向和基于事件的通信。它包括：Node.js服务器库、浏览器的Javascript客户端库。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5
(1)、支持浏览器/Nodejs环境
(2)、支持双向通信
(3)、API简单易用
(4)、支持二进制传输
(5)、减少传输数据量
（1）客户端
main.js添加下列代码
发送消息和监听消息
（2）服务端
服务端，我们基于express搭建node服务器。
index.js文件
然后启动服务端服务
客户端即可查看效果。
JAVASCRIPT 如何实现socket，
目前只有支持HTML5的浏览器加入了Javascript对Socket的支持, 而且目前处于测试阶段, 还不推荐使用. 如果你必须要用Javascript实现socket传输, 相关代码如下:
!-- 初始化 --
function connect(){
try{
var socket;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
var socket = new WebSocket(host);
message('p class="event"Socket Status: '+socket.readyState);
socket.onopen = function(){
message('p class="event"Socket Status: '+socket.readyState+' (open)');
}
socket.onmessage = function(msg){
message('p class="message"Received: '+msg.data);
}
socket.onclose = function(){
message('p class="event"Socket Status: '+socket.readyState+' (Closed)');
}
} catch(exception){
message('pError'+exception);
}
}
!-- 发送数据 --
function send() {
socket.send(text);
}
!-- 断开Socket --
socket.close()
js建立简单socket
import Stomp from "stompjs";
import SockJS from "sockjs-client";
let stompClient = null;
class Socket {
? constructor(socketMsg) {
? ? this.socketMsg = socketMsg;
? }
? /**
? * 向服务器发起websocket连接并发送CONNECT帧
? * @param {object} stompType 与服务器连接通道类型
? * @param {function} callback 回调方法
? */
? static startConnect( callback) {
? ? // 建立连接对象
? ? const socket = new SockJS(''连接地址);
? ? // 获取 STOMP 子协议的客户端对象
? ? stompClient = Stomp.over(socket);
? ? // 请求头验证，需要登陆
? ? const headers = {
? ? ? userId: JSON.parse(sessionStorage.getItem("id"))
? ? };
? ? // stompClient.debug = () = {};
? ? stompClient.connect(
? ? ? headers,
? ? ? (result) = {
? ? ? ? console.log("开始连接",result)
? ? ? ? // 订阅队列推送
? ? ? ? stompClient.subscribe('订阅1队列地址', res = {
? ? ? ? ? // 收到推送内容
? ? ? ? ? callback(data);
? ? ? ? });
? ? ? ? // 订阅被邀请
? ? ? ? stompClient.subscribe('订阅2地址', res = {
? ? ? ? ? callback(data);
? ? ? ? });
? ? ? },
? ? ? () = {
? ? ? ? // console.log(err);
? ? ? }
? ? );
? }
? // 主动发送消息
? static send(data) {
? ? stompClient.send(data.url, headers, data.sendMsg);
? }
? // 断开连接
? static disconnect() {
? ? stompClient.disconnect(() = {
? ? ? // console.log("连接关闭");
? ? });
? }
}
export default Socket;