Integrate Tencent Cloud IMsdk in the project
// IM Web SDK
npm install tim-js-sdk --save
// COS SDK needed to send pictures, files and other messages
npm install cos-js-sdk-v5 --save
Prepare im.js file, simply encapsulate Tencent Cloud SDK, and expose the interface
import TIM from'tim-js-sdk' // access to Tencent sdk
import COS from'cos-js-sdk-v5' // access to upload pictures
Options = {const SDKAppID: 0 // need access to SDKAppID 0 replaced with your instant messaging IM application } // Create SDK instance, the method for the same will return with an instance const tim = TIM.create (options ) // SDK instances are usually represented by tim. // Set the SDK log output level. For detailed levels, please refer to the description of the setLogLevel interface // tim.setLogLevel(0) // Normal level, with a lot of logs. Tim is recommended for access . setLogLevel(1) // release level, SDK outputs key information, it is recommended to use // register COS SDK plug-in tim.registerPlugin({'cos-js-sdk': COS }) in production environment // inherit access image upload export default im
TIM.create()SDKAppID
Introduced in vue, open the main.js file to introduce the im.js interface
import webIM from'./assets/js/im.js' // Import Tencent IM
Inherit the webIM method in vue
Vue.prototype.webIM = webIM // inherit im method
After completing the above steps, you can directly call the webIM method in the vue project
Take login as an example:
this.webIM.login({ userID:'', userSig:'' })
.then(function (imResponse) { console.log(imResponse.data) // successfully logged in }).catch(function ( imError) { console.warn('login error:', imError) // information about login failure })
Document reference address:
Simple document for live group
https://cloud.tencent.com/document/product/269/43002
Detailed interface document for IM chat
https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/SDK. html