socket.io.xcx
1.0.0
可以使用在微信小程式中的socket.io和engine.io
微信小程式的websocket做了一次封裝,導致socket.io或engine.io客戶端包,無法直接使用,該專案在engine.io-client專案基礎上,實作wxwebsocket的傳輸層,使得在小程式中能使用socket.io的所有功能。
注意:編譯出來的套件只能在微信小程式當中使用
$ git clone https://github.com/wujjpp/socket.io.xcx.git
$ cd socket.io.xcx
$ npm install
$ npm run serve
注意:執行測試程序,請開啟"開發環境不校驗請求網域名稱及TLS版本"
複製dist/socket.io.xcx.min.js到您的小程式原始碼,直接使用,具體可參考examples/app
此實例透過emit message向服務端傳送hello
字符串,服務端收到後emit message 到客戶端
client -> server : hello
server -> client : 'hello world '
~/examples/app/pages/index/index.js
// 导入socket.io小程序版包
import io from '../../socket.io.xcx.min'
// 使用IO创建socket实例,本实例使用本地socket.io服务器, 请根据根据实际情况修改IP
let socket = io ( 'ws://127.0.0.1:3000' )
function _setup ( ) {
var self = this ;
socket . on ( 'connect' , function ( ) {
console . log ( '连上了' ) ;
} ) ;
socket . on ( 'message' , function ( data ) {
self . data . messages . push ( data . message ) ;
self . setData ( {
messages : self . data . messages
} )
} ) ;
socket . on ( 'disconnect' , function ( ) {
console . log ( 'you have been disconnected' ) ;
} ) ;
}
Page ( {
data : {
messages : [ ]
} ,
onLoad : function ( ) {
_setup . apply ( this ) ;
} ,
send : function ( ) {
socket . emit ( 'message' , 'hello' ) ;
}
} )
~/examples/server/app.js
// Setup basic express server
var express = require ( 'express' ) ;
var app = express ( ) ;
var server = require ( 'http' ) . createServer ( app ) ;
var io = require ( 'socket.io' ) ( server ) ;
var port = process . env . PORT || 3000 ;
server . listen ( port , function ( ) {
console . log ( 'Server listening at port %d' , port ) ;
} ) ;
io . on ( 'connection' , function ( socket ) {
// when the client emits 'message', this listens and executes
socket . on ( 'message' , function ( data ) {
console . log ( 'message from client: ' , data ) ;
io . emit ( 'message' , {
message : data + ' world ' + new Date ( )
} ) ;
} ) ;
// when the user disconnects.. perform this
socket . on ( 'disconnect' , function ( ) {
// echo globally that this client has left
socket . broadcast . emit ( 'user left' , {
message : 'user left'
} ) ;
} ) ;
} ) ;
Made with ♥ by Wu Jian Ping